多くのテンプレート言語には「スロット」または「yield」ステートメントがあり、これらを使用すると、ある種の制御の反転を実行して、あるテンプレートを別のテンプレート内にラップすることができます。
Angular には「transclude」オプションがあります。
Ruby/Rails にはyield 文があります。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 コンポーネントをどのように定義すればよいでしょうか?
ベストアンサー1
試す：
var Wrapper = React.createClass({
render: function() {
return (
<div className="wrapper">
before
{this.props.children}
after
</div>
);
}
});
詳細については、ドキュメントの「複数のコンポーネント: 子」および「Children プロパティのタイプ」を参照してください。