javascript - ReactJS:在 Modal 中动态加载组件的最佳方式

Question

我想像这样创建一个干净且可重用的模态组件:

var Modal = React.createClass({

  ....

  render: function() {
    return (
      <div className={ this.state.className }>
        <div className="modal-opacity" onClick={this.toggle}></div>
        <section className="modal-content">
          <a className="close" onClick={this.toggle}><img src="/images/icon-close.svg" alt="Close" /></a>
          <div>
            {this.props.module === 'curriculum' ? <Curriculum /> : <Contact /> }
          </div>
        </section>
      </div>
    );

为了保持整洁——我想将模态内容加载为基于 {this.props.module} 的组件值，来自发起者组件。

有更好的方法吗？类似于 <{this.props.module}/> ？或者这是不安全的？也许 ReactJS 中已经内置了一些东西？

Answer 1

您可以使用 this.props.children 来呈现组件的子控件。像这样:

var Control = React.createClass({
    render: function() {
        return <div>{ this.props.children }</div>;
    }
});

var App = React.createClass({
    render: function() {
        return <Control><h1>child control</h1></Control>;
    }
});