Question

我正在尝试将道具传递给我的组件子，但我有这个错误：标记上的未知道具'用户'。从元素中删除此道具。

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

所以我的问题是如何将props传递给组件子组件并使它们可以在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>
    )
}

编辑：children组件的propTypes

ChildrenPage.propTypes = {
    user: PropTypes.object
}

export default ChildrenPage

Answer 1

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

在您的情况下，如果您的children集合具有DOM元素，则可能会发生这种情况。由于user不是标准DOM属性，因此当您尝试使用user prop克隆元素时，它可能会触发此警告。

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

希望这有帮助！

Answer 2

确保您没有将子键作为道具传递下来。下面的代码会在将子项传递给子项之前从子项中删除子键。

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

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

2 个答案: