React js与browserify和bootstrap引发错误

Question

我已经创建了一个Rails应用程序并安装了react-rails。我还安装了browserify-rails来帮助我管理外部的react包。

我的整个设置似乎工作得很好，但是当我尝试使用react-bootstrap包的模态组件时，我遇到了一个firebug错误，它似乎阻止了所有其他js的执行。错误如下:

未捕获的不变量违规:addComponentAsRefTo(…):Only aReactOwner可以有refs....

我已经尝试了许多可能的解决方案，但没有运气。我真的不明白为什么我得到错误，为什么它只发生在特定的组件，如<Modal />。如果我使用一个正常的html模态，没有错误。下面是我的设置:

package.json

{
  "name": "my_project",
  "devDependencies": {
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.1.1",
    "reactify": "^1.1.1"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.3",
    "react-dom": "^15.3.2"
  }
}

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require react
//= require react_ujs
//= require components
//= require_tree .
var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');

application.rb

...
config.browserify_rails.commandline_options = "-t reactify --extension=".js.jsx""
...

components.js

// Setup app into global name space for server rendering
var app = window.app = global.app = {};
var MyComponent = require('./components/my_component');
app.MyComponent = MyComponent;

my_component.js.jsx

var Modal = require('react-bootstrap').Modal;
var MyComponent = React.createClass({
  render() {
    return (
      <Modal show={true}><h1>I'm working</h1></Modal>
    )
  }
});
module.exports = MyComponent;

我是非常新的反应，因此我不确定这个错误是否与我的设置有关，或者如果它是别的什么?

Answer 1

当您使用<Element></Element>时，这被称为高阶组件。你放在标签之间的不是显示为HTML -它被传递给该组件的props。

:

<Modal show={true}><h1>I'm working</h1></Modal>

正在传递一个h1到Modal props。但是，查看它们的文档，您应该将Modal.X属性传递给Modal元素。例如，从他们的文档:

       <Modal
          show={this.state.show}
          onHide={close}
          container={this}
          aria-labelledby="contained-modal-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={close}>Close</Button>
          </Modal.Footer>
        </Modal>

Answer 2

不久前我遇到过这个问题。当我从npm中添加React组件时，就发生了这种情况。React的多个实例被加载到页面上(一个来自react-bootstrap，一个来自我的应用程序)。

基本上我所做的是:

在application.js中添加了React和ReactDOM全局变量(我看到你已经这样做了):

var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');

删除了资产管道的require反应:

//= require react

在我的组件中，我不再使用全局的React，而是再次使用browserify:

var React = require('react');
var Modal = require('react-bootstrap').Modal;
var MyComponent = React.createClass({});
module.exports = MyComponent;

请让我知道这是否适合你。