使用Rails 4.2配置react-bootstrap

Question

我希望将React-bootstrap与我当前的Rails项目集成在一起。我是ReactJS的新手，所以我想使用react-bootstrap库会让事情变得简单一点。然而，我发现配置非常困难。应该有一个gem来解决这个问题，但是一旦遵循自述文件中的说明，它就会抛出一个“权限被拒绝”的错误。我尝试了一个从react-bootstrap网站上截取的代码，它没有使用react-bootstrap语法。然而，我尝试过的所有涉及Bower、npm、rails-assets gem等的解决方案，都没有使react-bootstrap语法呈现出来。这是我的Button.js.jsx文件，它不会呈现到我的主页上：

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, document.getElementById("content"));

非常欢迎您的建议和建议！

Answer 1

我今天遇到了一个类似的问题，即将react-bootstrap包集成到我的RoR应用程序中，所以我找到了这个gem：https://github.com/mariopeixoto/react-bootstrap-rails，它基本上只需访问一个全局变量ReactBootstrap，就可以将所有的react bootstrap组件放在您的任意位置。

希望这能有所帮助！

Answer 2

我假设您的HTML文件中包含了bootstrap.min.css。

要记住的另一件事是，承认这一点正在开发中。

该项目正在积极开发中，API将会改变。查看1.0.0路线图和贡献指南，看看您可以在哪里提供帮助。在1.0.0之前的版本中，破坏性的更改应该会导致一个小的版本提升。

对于包含文件的方式，请确保执行以下步骤(http://react-bootstrap.github.io/getting-started.html

我个人选择了这种方式，它为我创造了很好的元素。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
<script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
<script>
  var Alert = ReactBootstrap.Alert;
</script>

Answer 3

使用前面提到的gem，并包含

//= require react_bootstrap

在application.js中，我能够获得以下代码以无错误地呈现。

var button = ReactBootstrap.Button;

ReactDOM.render(<button 
    bsStyle="success"
    bsSize="large"
    children="Register"/>,
  document.getElementById("content"));