Question

我有一个react组件，可以接受子组件并决定是否渲染它们。如果它呈现它们，则它还将通过onClick处理程序传递给子级。

render() {
    const { children } = this.props;
    return (
      <div className="select">
        { this.state.showDropdown
          ? (
            <div className="select__dropdown">
              {React.Children.map(children, (child, index) => React.cloneElement(child, {
                onClick: () => this.onOptionSelected(index),
              }))}
            </div>
          )
          : null }
      </div>
    );
  }
}

看起来，这些子组件始终需要从父级传递onClick处理程序，因此我在子原型中将其标记为isRequired。

Option.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired,
};

问题是onClick总是由父级添加，因此当我们这样编写父级组件时：

<Select>
      <Option>One</Option>
      <Option>Two</Option>
      <Option>Three</Option>
</Select>

我们不需要在子项上指定onClick。但是React警告：

 Warning: Failed prop type: The prop `onClick` is marked as required in `Option`, but its value is `undefined`.
     in Option

这是可以理解的，因为似乎Option元素已经创建并检查propTypes甚至在将它们传递到Select元素进行渲染之前。

有没有一种方法可以使它很好地工作？是否应该使onClick不是必需的，还是应该在我创建Option元素时传递无操作函数，尽管我知道会稍后被父级覆盖。

反应-在创建时而不是在渲染时检查PropTypes

0 个答案: