您可以使用React.cloneElement
,最好在应用程序中开始使用它之前先了解其工作方式。它已引入中React v0.13
,请继续阅读以获取更多信息,因此还有一些适合您的工作:
<div>{React.cloneElement(this.props.children, {...this.props})}</div>
因此,请阅读React文档中的内容,以了解它们如何工作以及如何使用它们:
在React v0.13 RC2中,我们将引入一个新的API,类似于React.addons.cloneWithProps,并带有以下签名:
React.cloneElement(element, props, ...children);
与cloneWithProps不同,此新函数没有用于合并样式和className的任何神奇的内置行为,其原因与我们在transferPropsTo中没有该功能的原因相同。没有人可以确定魔术物品的完整清单是什么,这使得很难推理代码,并且当样式具有不同的签名时(例如即将发布的React Native),也很难重用。
React.cloneElement几乎等同于:
<element.type {...element.props} {...props}>{children}</element.type>
但是,与JSX和cloneWithProps不同,它还保留引用。这意味着,如果您得到一个带有裁判的孩子,就不会意外地从祖先那里偷走它。您将获得与新元素相同的引用。
一种常见的模式是在孩子身上绘制地图并添加新道具。报告了很多有关cloneWithProps丢失引用的问题,这使得推理代码变得更加困难。现在,使用与cloneElement相同的模式将按预期工作。例如:
var newChildren = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { foo: true })
});
注意:React.cloneElement(child,{ref:'newRef'})确实会覆盖ref,因此,除非您使用callback-refs,否则两个父对象仍然不可能对同一个孩子拥有ref。
这是进入React 0.13的关键功能,因为道具现在是不可变的。升级路径通常是克隆元素,但是这样做可能会丢失引用。因此,我们需要一个更好的升级途径。在Facebook上升级呼叫站点时,我们意识到我们需要这种方法。我们从社区得到了同样的反馈。因此,我们决定在最终发行版之前再制作一个RC,以确保我们能收到它。
我们计划最终弃用React.addons.cloneWithProps。我们还没有这样做,但这是一个很好的机会,可以开始考虑您自己的用途并考虑使用React.cloneElement。在实际删除发布版本之前,我们一定会先发布其中包含弃用通知的发布版本,因此无需立即采取措施。
这里更多...