时间戳

首页 > 解决方案 > 如何为仅将 props 传递给 Child 的组件定义 propTypes

reactjs - 如何为仅将 props 传递给 Child 的组件定义 propTypes

问题描述

在 Parent 中定义 proptypes 的最佳实践是什么，它只将 props 传递给 Child 而不使用它？

简单用例：

const Parent = ({ p0, p1 }) => (
  <section className="Parent">
    <div>I'm the parent</div>
    <p>{p0}</p>
    <Child p1={p1} />
  </section>
);

Parent.propTypes = {
  p0: PropTypes.string.isRequired,
  // p1 ?
};

和子组件：

const Child = ({ p1 }) => (
  <section className="Child">
    <div>I'm a Child</div>
    <span>{p1}</span>
  </section>
);

Child.propTypes = {
  p1: PropTypes.string.isRequired,
};

这里是 Parent 的选项：

  1. 不要定义 p1 propTypes 并使用// disable-eslint-next-line react/propTypes
  2. p1: PropTypes.any.isRequired
  3. p1: Child.propTypes.p1（如果 Child 使用 React.memo 导出怎么办？）
  4. 使用与 Child 相同的类型p1: PropTypes.string.isRequired（如果 Child 有 10 个道具，复制所有道具类型真的很无聊）
  5. 其他解决方案

在线示例： https ://codesandbox.io/s/muddy-bush-3u243

标签： reactjseslintreact-proptypes

解决方案

我认为您可以从 Parent propTypes 扩展 Child propTypes

Parent.propTypes = {
  ...{
    p0: PropTypes.string.isRequired
  }, ...Child.propTypes
};

我认为这应该有效。

PS 我知道这段代码看起来不太好，但你可能可以使用像 lodash 或 Object.assign 这样的库来让它更漂亮。甚至可能创建一个方法来扩展 propTypes。

我希望它有帮助

推荐阅读