[解決済み】React.js: あるコンポーネントを別のコンポーネントにラップする

質問

多くのテンプレート言語には、"slot" または "yield" 文があり、ある種の制御の反転を行い、あるテンプレートを別のテンプレートの中に包み込むことができます。

Angularは トランスクルードオプション .

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.jsには <yield/> . 同じ出力を得るために、どのようにWrapperコンポーネントを定義すればよいのでしょうか？

どのように解決するのですか？

試してみてください。

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

参照 複数のコンポーネント。子供 と 子供の小道具の種類 をご覧ください。