レール4の反応モーダルを呼び出す際のエラー

Question

反応レールのフロントエンドを備えた私のレール4のアプリケーションで反応モーダルを使用する際に問題があります。私はすでにこのような質問How to call react-modal from rails-assets.org in react-rails componentとこのGitHubの問題https://github.com/reactjs/react-rails/issues/510の手順に従っていますが、どれもうまくいかないようです。

この

は、これは私application.jsが

//= require react 
//= require ./vendor/react-modal-v1.6.4 
//= require react_ujs 
//= require react-modal 

//= require ./vendor/react-modal-v1.6.4コールが反応モーダルのコンパイル済みのファイルへの呼び出しであるファイルである私のGemfile

source 'https://rails-assets.org' do 
    gem 'rails-assets-react-modal' 
end 

にレール-資産の逸品です。私は上記のgithubの問題のリンクに記載されている指示に従ってこれを行いました。最後に

が、これは私のコンポーネント定義

var ModalTest = React.createClass({ 
    getInitialState: function() { 
    return { 
     modalIsOpen: false 
    } 
    }, 

    openModal: function() { 
    this.setState({modalIsOpen: true}); 
    }, 

    closeModal: function() { 
    this.setState({modalIsOpen: false}); 
    }, 

    render: function() { 
    return (
     <div> 
     <button className="btn btn-primary" onClick={this.openModal}> 
      Open Modal 
     </button> 
     <ReactModal 
      isOpen={this.state.modalIsOpen} 
      onRequestClose={this.closeModal} 
      contentLabel="Modal" 
     > 
      <h1>Test Modal</h1> 
     </ReactModal> 
     </div> 
    ); 
    } 
}); 

私はコンソールに次のエラーを取得しています：

不明なエラー：反応するモーダル：あなたはこのアクセスを行うためにModal.setAppElement(el)を持つ要素を設定する必要があります。

私には何が欠けていますか？ あらかじめありがとう、みんな。

Answer 1

this GitHub issue for react-modalに投稿したyachakaの回答が見つかりました。

DOMの前にスクリプトがロードされ、モーダルの親要素が存在する前に反応モーダルに設定されてdocument.bodyに設定されます。次のように

これは、ライフサイクル・メソッドcomponentWillMountを添加することによって固定することができる。

componentWillMount: function() { 
    ReactModal.setAppElement('body'); 
}