React-modal在React 14中对我们非常有用。
我们已升级到React 16,并出现以下错误。
invariant.js:38未捕获的错误:Modal.render():有效的React元素 (或null)必须返回。您可能返回了未定义的数组 或其他无效对象
我们使用了GitHub上的确切示例代码,并重新安装了react-modal
。有什么想法吗?
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import ExampleModal from './components/example_modal.js';
ReactDOM.render(
<ExampleModal />
, document.querySelector('#publish-hook'));
example_modal.js:
import React from 'react';
import { Component} from 'react'
import ReactModal from "react-modal";
export default class ExampleModal extends Component {
constructor () {
super();
this.state = {
showModal: true
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render () {
return (
<div>
<button onClick={this.handleOpenModal}>Trigger Modal</button>
{
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
}
</div>
);
}
}
const props = {};
//ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))