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

Question

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

Angular具有“ transclude”选项。

Rails有收益声明。如果React.js拥有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，React.js没有<yield/>。如何定义包装器组件以实现相同的输出？

Answer 1

尝试：

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

有关更多信息，请参见文档中的多个组件：子代和子代道具类型。