jsとbrowserifyとブートストラップのエラーが発生しました

Question

私はRailsアプリケーションを作成し、react-railsをインストールしました。私は外部反応パッケージの管理に役立つbrowserify-railsもインストールしました。

私の全体的なセットアップはうまくいくようですが、react-bootstrapパッケージのモーダルコンポーネントを使用しようとすると、他のすべてのjをブロックするようなFirebugエラーが表示されます。エラーが読み：

キャッチされない不変違反：addComponentAsRefTo（...）：のみ ReactOwnerは、引用文献を持つことができますが....

私は、多くの可能な解決策が、運を試してみました。なぜ私はエラーが発生しているのか、なぜ特定のコンポーネント（例えば、<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; 

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

私は反応が非常に新しいですし、私はこのように、このエラーは私のセットアップとは何かを持っているかどうかわからないんだけどそれが何か他のものであれば？

Answer 1

<Element></Element>を使用すると、これを上位コンポーネントと呼びます。このタグの間に置いたのはではなく、がHTMLとして表示されます - それはそのコンポーネントの小道具に渡されます。

ので、この：

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

はh1Modalに小道具を渡しています。ドキュメントを見ても、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の複数のインスタンスがページにロードされました（1つはreact-bootstrapから、1つは私のアプリケーションから）。私は基本的に何

されました：

追加application.jsでReactとReactDOMグローバル（私はすでにこれをしなかっ参照）：削除

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

必要アセットパイプラインの反応：

//= require react 

私のコンポーネントで

は、代わりにグローバルが反応使用して、私は再びbrowserifyでそれらを必要としました：

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

これがうまく行けば教えてください。