2

我在带有 react-rails 前端的 rails 4 应用程序中使用 react-modal 时遇到问题。我已经按照这个 SO 问题How to call react-modal from rails-assets.org in react-rails 组件和这个 GitHub 问题https://github.com/reactjs/react-rails/issues/510中的步骤进行了操作，但是它们似乎都不起作用。

这是我的 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 问题链接中提供的说明进行的。

最后，这是我的组件定义

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)以使其可访问

我错过了什么？提前谢谢各位。

4

1 回答 1

3

我从yachaka那里找到了一个答案，他在 这个 GitHub 问题上发布了 react-modal。

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

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

componentWillMount: function() {
  ReactModal.setAppElement('body');
}
于 2016-12-16T18:30:31.547 回答