问题标签 [react-bootstrap]

我试图通过从 Javascript 类中实例化组件来在运行时在 React-Bootstrap 中动态生成警报组件。我这样做是因为有很多警报要显示，而且 Javascript 类创建起来更简洁。

我这样做的尝试没有奏效。我不确定这个问题通常适用于 React 还是仅适用于 React-Bootstrap。但是，错误发生在 react.js 中，它会抛出以下内容：

抛出发生在alert.getComponent()以下 JSX 文件的调用中：

该Alert组件来自 React-Bootstrap 库。这些div组件似乎无关紧要，但我发现它们是满足反应框架所必需的。实际上，我会将AlertNotice实例存储在反应状态中，然后从中生成反应节点。

解决这个问题的正确方法是什么？

这里有一个提示。如果我替换return alert.getComponent();为以下硬编码警报，则 AlertDismissible 组件呈现时不会出现错误（重复），但我会收到警告：

以下是我在上述替换中收到的警告消息，包括一个链接，说明我应该key=为每个警报设置一个唯一的：

但是，如果我只是用AlertNotice.prototype.getComponent上面的硬编码警报替换里面的代码，我会得到与TypeError以前相同的消息。

为了完整起见，这是我的 HTML 源代码。这是 react 和 react-boostrap v0.11.1

我试图让一个引导手风琴运行，我的面板是 React 类。不知何故，这不起作用：

http://jsfiddle.net/3azxcquh/

是 React 类，它WontWorkPanel使用 key 呈现单个面板this.props.pkey。

有人可以解释我做错了什么，或者如何做得更好？

谢谢！

我正在使用 React 并使用 React-Bootstrap 组件。

我在 React-Bootstrap 库中发现了一些问题，我通过编辑 react-bootstrap.js 文件“修复”（或“变通”）。问题是，如果明天有新版本的 react-bootstrap 出现，那么我将不得不将我在 react-bootstrap.js 文件中编写的所有代码复制粘贴/重写/任何代码到新版本中。我不想这样做，所以我在徘徊，如果有一种方法可以修改 react-bootstrap 提供的组件类（即更改渲染函数）而不接触 react-bootstrap.js 文件。问题是我无法弄清楚如何做到这一点，或者至少我发现组件类的内部工作并不容易理解。关于我如何做到这一点的任何想法？

提前致谢！

我正在使用http://react-bootstrap.github.io/ Carousel 组件。在里面，有一个 CarouselItem 组件，所以它看起来像这样：

一切正常，但如何获得 CarouselItem 道具？我想在 EmbeddedVideo 内收听 CarouselItem.props.active 的道具变化，以确定它是否可见，如果不可见，则暂停 EmbeddedVideo 组件内的视频。

我相信我可以在 CarouselItem 渲染方法中创建 EmbeddedVideo 并传递它的活动道具，但我不想复制粘贴整个 CarouselItem 来仅添加一个元素。

那么我该如何修改呢？或者还有其他方法可以使用 CarouselItem 控制 EmbeddedVideo？

我正在使用 react.js 和 bootstrap 构建一个应用程序以进行反应。我正在尝试创建一个带有“成功”类的表行。但是，在 react 中将属性“class”传递给 tr 标签不起作用，在翻译后的 HTML 中没有任何属性。

相关 JSFiddle - http://jsfiddle.net/7pqrwfch/

我正在努力学习反应。试一试，我正在尝试使用 react-bootstrap 并尝试使用 react-bootstrap 手风琴来实现手风琴。首先我尝试使用 ButtonToolBar，效果很好。

但是，react-bootstrap 的手风琴代码不起作用。它显示了内容，但不像我们在手风琴的情况下那样。这是代码：

我也尝试过使用，它的行为也一样。我从这里得到帮助。

这里有一个类似的问题。但是，就我而言，如果不自定义 ReactBootstrp.Panel，我就无法让它工作。

任何想法，我怎样才能让它工作？

我正在使用 react-bootstrap 模式进行登录。用户点击“登录”并向我们的服务器发送请求。如果登录失败 - 我们设置状态 - LOGIN_FAILED

此时，react 应用程序重新渲染。

登录失败的原因以错误消息的形式显示，例如“用户名或密码不正确”。由于模式已经处于活动状态，我们重新渲染它，并在“登录”按钮下方显示错误消息。

这工作正常 - 除了您第一次使用模式（或刷新页面后）

在这种情况下，模态消失了。

我调试了它，看到这段代码被执行并且模态被卸载：

OverlayMixin.js

. . .

有没有人遇到过这个？我正在考虑使用 OverlayMixin 来查看它是否有任何区别，但想知道根本原因。

任何帮助表示赞赏。

这是 LoginModal 反应组件：

我对反应很陌生，所以这可能是一件很容易做到的事情。我目前正在开发一个模态组件（来自 ReactBootstrap），并且我在模态对话框组件中使用 react-bootstrap 输入组件，带有type=email. 这样，当在<form>元素内部并提交表单时，将触发验证，如果验证失败，则会在输入组件顶部显示弹出类型消息。但是，我没有在<form>元素内使用此组件，并且希望在单击按钮时触发它。这是我拥有的代表问题的工作代码：

JSX：

笔记：

1. 输入字段是一个react-bootstrap.Input类。
2. getDOMNode().focus() 概念来自Facebook 反应文档

当按钮 onclick 处理程序运行时，电子邮件输入字段应该获得焦点，但它没有发生。我发现 react-bootstrap 输入字段类在包装 div 中呈现真实的 DOM 输入字段。这是 console.log 的输出：

所以看起来输入没有获得焦点，因为焦点应用在包装 div 上，它拒绝它（我document.activeElement在控制台中使用来检查）。

问题是，如何关注真实input元素？

注意：有点无关，但 React 尊重该autoFocus属性。这在渲染后需要立即设置焦点的情况下很有用。尽管如此，它仍然不能替代程序化方式。

所以我目前正在开发一个用 Flask 编写的项目，我在其中添加了 Bootstrap。我最近开始添加一些反应组件，我想让它们看起来像其他引导组件。这是我的一些代码：

这是我包含 bootstrap.js 文件和 react.js 文件的地方

这个 html 通常由 bootstrap 呈现为美妙的小寻呼机图标，但没有反应：

我知道我没有全额退货，退货不是手头的问题，但是，它的样式。我尝试使用以下内容添加 Pager 元素

但我首先得到的响应是未定义 ReactBootstrap。然而，我读到 ReactBootstrap 全局是在您包含 js 文件时自动创建的。另一个响应是 Pager 不存在（显然是因为 ReactBootstrap 无法返回它）。

所以我的问题是，我可以简单地返回没有 data-reactid 信息的 html，或者以某种方式让它通过 bootstrap 呈现而不需要 reactBootstrap？或者我的文件中是否缺少一些东西来使用 reactBootstrap。在此先感谢您的帮助！