javascript - react .js : Wrapping one component into another

Question

许多模板语言都有“slots”或“yield”语句，允许执行某种控制反转来将一个模板包装到另一个模板中。

Angular 有 "transclude" option .

Rails 有 yield statement .如果 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.js 没有 <yield/> .如何定义 Wrapper 组件以实现相同的输出？

Answer 1

试试:

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

见 Multiple Components: Children和 Type of the Children props在文档中了解更多信息。