如何将道具传递给React.cloneElement的孩子？

我试图将道具传递给我的子组件，但是我有这个错误：标记上的未知道具'user'。从元素中删除此道具。如何将道具传递给React.cloneElement的孩子？

在查看文档和问题时，我想我明白给React.cloneElement（第二个参数）的道具必须是DOM认可的属性。

所以我的问题是如何将道具传递给子组件并使它们在this.props中可访问？

这里是我的代码：

render() { 

    const { children } = this.props 
    const { user } = this.state 

    const childrenWithProps = React.Children.map(children, child => 
     React.cloneElement(child, { user })  
    ) 

    return (
     <div> 
      { childrenWithProps } 
     </div> 
    ) 
}

编辑：孩子组件的propTypes

ChildrenPage.propTypes = { 
    user: PropTypes.object 
} 

export default ChildrenPage

来源

2017-09-27 OhmWang

你能粘贴'ChildrenPage'的声明吗？。我是一个非常确定的错误是在ChildrenPage组件中。 – Tomasz

确保你没有传下来的孩子键道具。在将代码传递给孩子之前，下面的代码将儿童的钥匙从道具上移除。

let key = 'children'; 
let {[key]: _, ...newProps} = state; 
{React.Children.map(this.props.children, child => 
    React.cloneElement(child, {...newProps}))}

这是可能的原因之一。并且让我知道这个解决方案是否有效。 https://facebook.github.io/react/warnings/unknown-prop.html

来源

2017-09-27 10:19:26

在我的代码中，我试图传递一个新创建的对象'{user}'而不引用父对象。另外，并且与链接的文档相关，我甚至尝试克隆“用户”对象'React.cloneElement（child，{user：Object.assign（{}，user）}）'，但仍然有道具错误“div”中的“user”。 – OhmWang

@OhmWang您是否提到了子组件的PropTypes？并且，它们是否与{user} –

匹配我试图在子组件上添加propTypes，但是错误依然存在。你可以在我的初始文章编辑中看到它。 – OhmWang

您的代码对我来说很不错。通常，当您尝试使用无效/非标准DOM属性呈现DOM元素（不是React组件）时，React会发出此警告。

就你而言，如果你的children集合有一个DOM元素，可能会发生这种情况。由于user不是标准的DOM属性，因此在尝试使用user prop来克隆元素时，可能会触发此警告。

您可以阅读更多关于此错误的信息here。

希望这会有所帮助！

来源

2017-10-02 17:15:39

如何将道具传递给React.cloneElement的孩子？

回答

相关问题