在 rails 4 应用程序中调用 react-modal 时出错

Question

我在带有 react-rails 前端的 rails 4 应用程序中使用 react-modal 时遇到问题。我已经按照这个 SO 问题 and in this GitHub issue https://github.com/reactjs/react-rails/issues/510 中的步骤进行操作，但其中 none 似乎有效。

这是我的 Gemfile

中的 rails-assets gem

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调用是对react-modal的编译文件的调用。我是按照上述 github 问题 link 中提供的说明进行操作的。

最后，这是我的组件定义

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

我在控制台上收到以下错误：

未捕获错误：react-modal：您必须使用 Modal.setAppElement(el) 设置一个元素才能使其可访问

我错过了什么？提前致谢，伙计们。

Answer 1

我从 yachaka who posted in this GitHub issue for react-modal 找到了答案。

脚本在 DOM 之前加载，导致 react-modal 在模态的父元素存在之前将其设置为 document.body。

这可以通过添加生命周期方法 componentWillMount 来解决，如下所示：

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

在 rails 4 应用程序中调用 react-modal 时出错

Error on calling react-modal in rails 4 app

ruby-on-rails

reactjs

react-rails

react-modal