用 browserify 和 bootstrap 引发错误反应 js

Question

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

我的整个设置似乎运行良好，但是当我尝试使用 react-bootstrap 包的模态组件时，我遇到了一个萤火虫错误，它似乎阻止了所有其他 js 执行。错误显示：

未捕获的不变违规：addComponentAsRefTo(...)：只有一个 ReactOwner 可以有 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> 时，这称为高阶组件。你放在这个标签之间的内容 not 显示为 HTML - 它被传递给该组件的 props。

所以这个：

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

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

在我的组件中，我没有使用全局 React，而是再次使用 browserify：

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

如果这对你有用，请告诉我。