我正在构建一个 React 组件，它会延迟卸载其子项以便为它们设置动画。卸载时，我想传入一个额外的props（例如，数据属性或类名）以处理动画。
这是一般情况的特定实例，我想覆盖子项的某些属性。我开始意识到以下模式正是我想要的：
this.props.children.map(child =>
<child.type key={child.key}
ref={child.ref}
{...child.props}
// add my props into children here
data-leaving={true} />)
我没有返回子元素，而是返回一个相同类型和相同 props 的新元素。然后我可以添加或删除我想要的任何props！
然而，这是没有记录的，感觉很hacky。我想知道这是否在每种情况下都可以安全使用。
请注意，我知道替代方案（例如，接受一个直接返回子项而不是子项的函数），但这提供了迄今为止最方便的界面。
添加新props或覆盖现有props的最佳方法是映射您的子props并使用React.cloneElement.
阅读有关react儿童的好文章。
React.Children.map(this.props.children, child =>
React.cloneElement(child, { newProp: 'value', existingProp: 'value' }));
您也可以使用 children 作为函数。这样你也可以添加你的props。
例子：
// Root Component
const Parent = () => {
const onClose = () => console.log('I am on Close Prop');
// Pass OnClose to children
return <MyComponent>{ children(onClose) }</MyComponent>
}
// MyComponent
const MyComponent = () => {
// Pass OnClose to children
return (
<div>
{/* children below */}
{(onClose) => (
<FormComponent
myNewProp={onClose}
/>
)}
</div>
);
}