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

作者

许多模板语言都有“slot”或“yield”语句，它们允许进行某种控制反转，将一个模板包装到另一个模板中

Angular具有“transclude”选项

Rails有一个yield语句。如果React.js有yield语句，则如下所示：

var Wrapper=React.createClass({
render:function（）{
返回(
&lt；div className=“包装器”&gt；
之前
&lt；收益率/&gt；
之后
&lt；/div&gt；
);
}
});
var Main=React.createClass({
render:function（）{
返回(
&lt；Wrapper&gt；&lt；h1&gt；内容&lt；/h1&gt；&lt；/Wrapper&gt；
);
}
});

期望输出：

&lt；div class=“包装器”&gt；
之前
&lt；h1&gt；内容&lt/h1&gt；
之后
&lt/部门&gt；

唉，React.js没有&lt；产量/&gt。如何定义包装器组件以实现相同的输出

尝试：

var Wrapper=React.createClass({
render:function（）{
返回(
&lt；div className=“包装器”&gt；
之前
{this.props.children}
之后
&lt；/div&gt；
);
}
});

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

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with