Javascript ReactJS：在Modal中动态加载组件的最漂亮的方法

我想创建一个干净且可重用的模态组件，如下所示：

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>
    );

var Modal=React.createClass({
....
render:function（）{
返回(
{this.props.module===‘课程’？：}
);

为了保持整洁，我希望根据来自启动器组件的

{this.props.module}

值将模式内容作为组件加载

---

有更好的方法吗？比如

？或者这是不安全的？也许在ReactJS内置中已经有了一些东西？

您可以使用

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>;
    }
});

var Control=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var App=React.createClass({
render:function（）{
返回子控件；
}
});

太棒了，这正是我想要的！谢谢。