Question

假设我有一个<Button />组件和一个<EnhancedButton />组件。增强型按钮仅用作常规按钮的包装，而且还具有其他功能。每个组件都有自己的propTypes和defaultProps。我正在尝试找出处理父级和子级的propTypes和defaultProps的最佳方法。我正在考虑这样的模式-

// EnhancedButton.js
...
return (
  <div { ...enhancedButtonProps }>
    <Button { ...buttonProps } />
  </div>
);

EnhancedButton.propTypes = {
  ...Button.propTypes,
  enhancedProp1: PropTypes.bool,
  enhancedProp2: PropTypes.string,
};

EnhancedButton.defaultProps = {
  ...Button.defaultProps,
  enhancedProp1: true,
  enhancedProp2: 'some value',
};

我只是不确定这是否是处理建立propTypes和defaultProps的最佳方法。

最大的优点是，每当您拥有使用其他组件的组件时，您都不必为该子组件写出所有propTypes和defaultProps。它还解决了以下问题：子组件应该始终有权访问其所有propTypes和defaultProps，即使增强型按钮组件在按钮组件处于更新状态时也没有更新。

明智的做法是，这会影响可读性，并且可能无法预测。如果按钮组件更新，则可能会破坏增强按钮的使用，但是我认为，即使您对每个单独的代码进行硬编码，您也可能会冒着任何一种风险。我个人并不喜欢这样做，也没什么大不了的，但是我正在尝试评估这是否是有效的模式。

你怎么看？

将子组件propTypes和defaultProps传递给父组件的模式？

0 个答案: