Fehler beim Aufruf von react-modal in Schienen 4 App

Question

Ich habe Probleme mit reactive-modal in meiner Rails 4 App mit einem React-Rails-Frontend. Ich habe bereits die Schritte in dieser SO-Frage How to call react-modal from rails-assets.org in react-rails component und in dieser GitHub-Ausgabe https://github.com/reactjs/react-rails/issues/510 befolgt, aber keiner von ihnen scheint zu funktionieren.

Dies ist die Schienen-Vermögen gem in meinem Gemfile

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

Das ist mein application.js

Datei ist

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

Der //= require ./vendor/react-modal-v1.6.4 Aufruf ein Aufruf an die kompilierte Datei ist für reagieren modal. Ich tat dies in Übereinstimmung mit den Anweisungen, die oben im GitHub-Problemlink angegeben sind. Schließlich

, das ist meine Komponentendefinition

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> 
    ); 
    } 
}); 

Ich erhalte die folgende Fehlermeldung auf der Konsole:

nicht erfasste Fehler: reagieren modal: Sie müssen ein Element mit Modal.setAppElement(el) setzen Sie diesen zugänglich zu machen

Was fehlt mir? Vielen Dank im Voraus, Leute.

Answer 1

Ich habe eine Antwort von yachaka gefunden, die in this GitHub issue for react-modal gepostet wurde.

Das Skript wird vor dem DOM geladen, was zu einer reaktionsmodalen Einstellung des übergeordneten Elements des Modals auf document.body führt, bevor es existiert.

Dies kann durch Zugabe des Lebenszyklus-Methode festgelegt werden componentWillMount wie folgt:

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