问题标签 [react-bootstrap]

我在我的 Rails 应用程序中进行了反应和引导，到目前为止它们独立工作得很好。我想通过使用 react-bootstrap 来组合功能。我正在按照本教程进行操作：http ://react-bootstrap.github.io/getting-started.html 。

我做了 CommonJS 部分。我在哪里做的：

在终端。

然后，我转到资产中的 application.js 文件并添加了以下代码： Var Alert = require('react-bootstrap').Alert;

在控制台中，它在这一行出错，它说Uncaught ReferenceError: require is not definedapplication.js?body=1:28 (anonymous function)

我如何获得工作要求？

我需要像这样打开/关闭模式

$(元素).modal('显示')

怎么做？

看起来 ModalTrigger 在提供 React 组件时不能很好地发挥作用。考虑以下：

单击第一个 div 时，没有任何反应，但第二个 div 会按预期打开模式。

DOM 看起来是一样的，但是当使用 Chrome 的 React 扩展时，我可以看到在第一个 ModalTrigger 和底层 div 之间有一个额外的 React 组件，名为MyDiv.

这是一个问题的原因是 ModalTrigger 依赖于它的子元素onClick来显示模态。使用常规 div 时，它按预期工作，但由于这里的直接子级是 React 组件，因此没有明显的方法可以使此连接转到实际的 div 组件。

所以我的问题是，这是 react-bootstrap 的一个缺点，它无法处理 React 实例化组件的方式，还是我应该以某种方式解决的正常/预期行为？

谢谢！

编辑：我想将此作为评论发布，但无法正确格式化：/

解决这个问题的一种方法是让 MyDiv 知道它有一个this.props.onClick方法，并显式触发它：

这会产生耦合（或为 PropTypes/getDefaultProps 解耦的额外行），这远非理想。

另一种方法是将 MyDiv 包装在另一个匿名 div 中：

哪个好得多，但不知何故也感觉不对。有什么建议么？

我有一个反应引导工具提示，除非我靠近窗口边缘，否则效果很好。在这种情况下，我希望工具提示不要被切断，而是调整大小以适应全文并在所有方面都有边框。

我还希望工具提示箭头指向触发元素的正上方（在我的例子中是“i”图标）。

我的猜测是，这需要在ReactBootstrap.Tooltip渲染后使用 DOM。我需要能够计算它的当前大小和窗口顶部和左侧偏移位置，然后重新定位/重新调整它的大小。

这是我当前的代码（在 CoffeeScript 中）：

这是问题的屏幕截图：

我该如何解决这个问题？

我试图播放此处显示的示例代码，以便有一个覆盖触发器，该触发器在我的表单组件的无效用户名字段正则表达式上显示一个弹出窗口。Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state.尝试执行此代码时出现经典错误：

一如既往，非常感谢您对此的任何帮助。谢谢你。

我对这一切都很陌生（大约三天），所以请原谅我的无知。

我正在使用 React、React-Router 和 React-Bootstrap 的组合。像这个人一样，我想结合 React-Router<Link />和 React-Bootstrap 的<NavItem />功能，以便将.active类应用于<li>元素而不是（或以及）<a>元素。

真正令人沮丧的是我有这个工作，然后当我做出一些不相关的更改时它停止了，在我看来，一些不相关的更改（我相信我已经撤消了，从那以后）。

这是我的代码：

listlink.js

应用程序.js

let isActive =...当我在in设置断点时，它listlink.js会中断 5 次，每次中断一次<ListLink>，然后再次中断第五次。这是第五次 where is ，并且引用会引发错误。this.props.totoonthis.context.routerundefined.isActive

我想也许是因为<DefaultRoute />声明，但情况似乎并非如此（注释掉这条线并没有什么不同）。无论/#/[page]URL 中是哪个，它总是toon在第五次迭代中，并且总是失败并出现相同的错误。

Uncaught TypeError: Cannot read property 'isActive' of undefined

我不知道如何进一步调试。想法？

我正在使用 react-bootstrap + requirejs + bower + php（不是 nodejs）设置一个入门应用程序。这一系列工具非常新。所以这是我的应用程序：

.bowerrc

鲍尔.json

索引.html

javascript/setup.js

javascript/app/main.js

应用结构

我尝试过这样的事情： app/main.js

这给了我： Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

编辑 忽略我的以下问题对我有用：

应用程序/main.js

嗨，我知道如何使用可折叠的 mixin，我成功地制作了可折叠的但不能制作整个可折叠的。

真的很难做到，有什么办法吗？

多谢 ！

I am using react-bootstrap for my project and I am trying to add custom bsStyle property to the button component. If I use the default bootstrap classes according to the following link http://react-bootstrap.github.io/components.html#buttons the class name is rendered properly. However if i change the property to bsStyle='facebook' it renders btn-undefined

So in short, I am clueless where am I going wrong when I pass bsStyle property to the group in react bootstrap.

This is my HTML looks like

and if I change my code to

it works fine and the class is rendered properly.

This is the console html log

我刚刚开始探索 react 并试图了解如何使用react-bootstrap如果安装在凉亭上我只是按照入门部分进行操作，但我并不真正了解应该如何工作。

在这里我有我的标记

如何使用这个包生成引导组件？

更新

我想我明白了，但我不确定我是否在我的标记中正确使用它

Alert.js是编译好的jsx