react.js：将一个组件包装到另一个组件中

Question

许多模板语言都有“slots”或“yield”语句，它们允许进行某种形式的控制反转，将一个模板包装在另一个模板中。

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

唉，react.js没有 。我如何定义包装器组件以实现相同的输出？

Answer 1

尝试：

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          {this.props.children}
        after
      </div>
    );
  }
});

更多信息请参见多个组件：文档中的儿童和儿童道具类型。