Question

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

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

未捕获的不变违规：addComponentAsRefTo（...）：仅限a ReactOwner可以有refs ....

我尝试了很多可能的解决方案，但没有运气。我真的不明白为什么我会收到错误，为什么它只发生在{ "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" } }这样的特定组件上。如果我使用普通的html模式，则没有错误。这是我的设置：

的package.json

//= 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.js

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

application.rb中

// Setup app into global name space for server rendering
var app = window.app = global.app = {};

var MyComponent = require('./components/my_component');
app.MyComponent = MyComponent;

components.js

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

my_component.js.jsx

<preference name="loadUrlTimeoutValue" value="60000" />

我是非常新的反应，因此我不确定这个错误是否与我的设置有关或者是否是其他的？

Answer 1

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

所以这个：

<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，另一个来自我的应用）。

基本上我做的是：

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

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;

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

使用browserify和bootstrap引发错误

2 个答案: