在rails 4 app中调用react-modal时出错-Java 学习之路

我在使用react-4前端的rails 4应用程序中使用react-modal时遇到了麻烦 . 我已经按照这个SO问题中的步骤How to call react-modal from rails-assets.org in react-rails component和这个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) 设置元素才能使其可访问

我错过了什么？先谢谢你，伙计们 .

1 回答

3
我找到了yachaka的答案，他发表在this GitHub issue for react-modal .

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

这可以通过添加生命周期方法 componentWillMount 来修复，如下所示：
```
componentWillMount: function() {
  ReactModal.setAppElement('body');
}
```
回复于 2024-04-28T18:47:10+08:00

在rails 4 app中调用react-modal时出错

1 回答

相关问题