javascript - React - 在创建时检查 PropTypes 而不是渲染时

Question

我有一个反应组件，它可以接受子组件并决定是否渲染它们。如果它呈现它们，它还会将 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元素时传入一个无操作函数，尽管我知道它稍后会被父级覆盖。

标签： javascriptreactjs