Question

我想创造一个干净的＆amp;可重复使用的模态组件如下：

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

ReactJS：在Modal中动态加载Component的最漂亮的方法

1 个答案: