React: cloneElement 提供的必需道具仍然在控制台中显示警告

创建于 2015-07-27 · 3评论 · 资料来源: facebook/react

我做了一个例子，所以它更容易理解，但由于“缺少必需的道具”，控制台中基本上会显示警告。

道具是用React.cloneElement赋予元素的，所以我没想到会收到缺少道具的警告。我知道这可能是一个边缘情况...

<A name="name" value="value">
    <B></B>
</A>

class A extends React.Component {
    render() {
        return (
            <div>
                {React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(child, {
                        name: this.props.name,
                        value: this.props.value
                    });
                }, this)}
            </div>
        );
    }
}

A.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

class B extends React.Component {
    render() {
        return <span>{this.props.name} : {this.props.value}</span>;
    }
}

B.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

资料来源

tleunen

最有用的评论

我不知道你真正的用例@tleunen是什么，但我在实现一个可重用的组件时偶然发现了这个问题，该组件有责任将 props 传递给它的孩子：

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

最后，我找到了一个更优雅的解决方案来解决这个问题：

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

我更喜欢它，因为ComponentRequiringTheNumber的依赖是明确的，并且NumberSelector变得明显。这样，赋予嵌套组件的 props 仅在相关时才进行评估。

应用于你的小提琴： https :

micaste 于 2017-03-01

👍15 🎉3

所有3条评论

这是故意的；在元素创建时验证 props 会产生更多有用的错误。它还更符合静态类型系统（如 Flow）的行为。现在最好的方法是简单地将这些道具标记为可选。我们还可能在未来引入一个称为 context 的功能，它将提供另一种支持的方式来将 props 从像 A 这样的父级传递给像 B 这样的子级。

sophiebits 于 2015-07-27

👍8 😕7 ❤3

我也这么想。谢谢@spicyj

tleunen 于 2015-07-27