Ошибка при вызове react-modal в приложении rails 4

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

Это жемчужина rails-assets в моем 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 Error: react-modal: вы должны установить элемент с Modal.setAppElement(el), чтобы сделать это доступным

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


person h_tm    schedule 15.12.2016    source источник
comment
что такое react-modal? это имя файла вы установили?   -  person Edmund Lee    schedule 16.12.2016


Ответы (1)


Я нашел ответ от yachaka, который разместил сообщение в эта проблема GitHub для react-modal.

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

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

componentWillMount: function() {
  ReactModal.setAppElement('body');
}
person h_tm    schedule 16.12.2016