许多模板语言都有“ 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/>。如何定义包装器组件以实现相同的输出?
<yield/>
尝试:
var Wrapper = React.createClass({ render: function() { return ( <div className="wrapper"> before {this.props.children} after </div> ); } });
有关更多信息,请参见文档中的多个组件:子代和子代道具类型。