Ошибка при вызове реакции-модала в рельсах 4 app

Question

У меня возникли проблемы с использованием реактивного мода в моем приложении 4 рельсов с передним концом рельсов. Я уже выполнил шаги в этом вопросе SO How to call react-modal from rails-assets.org in react-rails component и в этом выпуске GitHub https://github.com/reactjs/react-rails/issues/510, но ни один из них не работает.

Это жемчужина Рельсы-активы в моем Gemfile

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

Это файл моего application.js

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

//= require ./vendor/react-modal-v1.6.4 вызова является вызовом скомпилированного файла для реакции покадрово. Я сделал это в соответствии с инструкциями, приведенными выше в ссылке на 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> 
    ); 
    } 
}); 

Я получаю следующее сообщение об ошибке на консоли:

Uncaught Ошибка: реагировать покадрово: Вы должны установить элемент с Modal.setAppElement(el), чтобы сделать это доступным

Что мне не хватает? Заранее спасибо, ребята.

Answer 1

Я нашел ответ от yachaka, который размещен в this GitHub issue for react-modal.

Сценарий загружается перед DOM, в результате реакция-модальная установка родительского элемента модальной формы на document.body до его существования.

Это может быть исправлено путем добавления метода жизненного цикла componentWillMount следующим образом:

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