javascript - 使用 browserify 和 bootstrap 引发错误来 react js

Question

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

我的整个设置似乎运行良好，但是当我尝试使用 react-bootstrap包的模态组件，我看到一个似乎阻止所有其他 js 执行的 Firebug 错误。错误如下:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have 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;

我对 react 非常陌生，因此我不确定这个错误是与我的设置有关还是其他原因？

Answer 1

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

所以这样:

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

正在传递 h1至 Modal Prop 。但是查看他们的文档，您应该传递 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>