Question

我正在构建一个React组件，它会延迟卸载子组件以使其动画化。卸载时，我想传入一个额外的道具（例如，数据属性或类名）来处理动画。

这是我希望覆盖子项的某些属性的一般情况的特定实例。我已经意识到跟随模式完全符合我的要求：

this.props.children.map(child => 
    <child.type key={child.key} 
                ref={child.ref}
               {...child.props} 
               // add my props into children here
               data-leaving={true} />)

我返回一个相同类型且具有相同道具的新元素，而不是返回子元素。然后我可以添加或删除任何我想要的道具！

然而，这是没有记录的，感觉非常hacky。我想知道在每种情况下这是否安全。

请注意，我知道替代方案（例如，接受一个直接返回子节点而不是子节点的函数）但是这提供了迄今为止最方便的接口。

Answer 1

添加新道具或覆盖现有道具的最佳方法是使用React.cloneElement映射您的子道具并克隆每个元素。

关于react children的好文章。

React.Children.map(this.props.children, child =>
    React.cloneElement(child, { newProp: 'value', existingProp: 'value' }));

您也可以将儿童用作功能。这样你也可以添加你的道具。

示例：

// 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> ); }

如何安全地将道具注入React儿童？

1 个答案: