modal-dialog - React es6 es2015 模式弹出窗口

Question

我对 React 和 ES6 很陌生。我正在使用 React 构建一个小型应用程序，并且遵循 ES6 标准。现在我需要通过单击按钮打开模式窗口。

我尝试了react-bootstrap模式和天窗。但并没有找到太多运气。

任何人都可以建议打开/关闭模式以及回调的最佳方式。

提前致谢。

Answer 1

我整理了一个示例来说明如何利用父/子关系并传递回调。

场景基本上是:

• 有一个家长<App />组件
• 它可以显示<Modal />组件
• <App />控制是否<Modal />是否开放
• <App />传递它的 child ，<Modal /> ，回调“closeModal”

请参阅此 JSBin 示例，了解完整的解决方案:http://jsbin.com/cokola/edit?js,output

以及视觉摘要:

<Modal />只是一个“哑”组件。它不“控制”是否打开。这取决于家长<App /> 。父级通过传递回调通知它如何关闭自身 this.props.closeModal

class Modal extends React.Component {
  render() {
    const { closeModal } = this.props;

    return (
      <div className="jumbotron" style={{position: 'absolute', width: '100%', top: 0, height: 500}}>
        <h1>Some Modal</h1>
        <button 
          className="btn btn-md btn-primary" 
          onClick={closeModal}
          >Close Modal</button>
      </div>
    )
  }
}

<App />了解打开/关闭状态并控制其子项，<Modal />

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    };
  }

  _openModal() {
    this.setState({modalOpen: true});
  }

  _closeModal() {
    this.setState({modalOpen: false});
  }

  render() {
    const { modalOpen } = this.state;

    return (
      <div>
        <button 
          className="btn btn-md btn-primary" 
          onClick={this._openModal.bind(this)}
          >Open Modal</button>

        {/* Only show Modal when "this.state.modalOpen === true" */}
        {modalOpen 
          ? <Modal closeModal={this._closeModal.bind(this)} />
          : ''}
      </div>
    );
  }
}