React如何为shape结构的data属性添加isRequired 无需声明defaultProps

安全阿岳

2026-10-5

问题结论

完全可以，这是两种合规的报错解决方案，具体选择取决于你的组件设计逻辑。

报错原因说明

你触发的是eslint的react/require-default-props规则校验，该规则的核心逻辑是：所有没有标记为必填（即未加.isRequired）的prop，必须声明对应的默认值。你当前的data属性属于可选prop，但没有配置defaultProps，因此触发报错。

加`.isRequired`的实现方式

直接在PropTypes.shape()的末尾追加.isRequired即可，修改后的校验规则如下：

UserCard.propTypes = {
  data: PropTypes.shape({
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired,
    company: PropTypes.shape({
      name: PropTypes.string.isRequired,
    }),
    website: PropTypes.string.isRequired,
    address: PropTypes.shape({
      street: PropTypes.string.isRequired,
      suite: PropTypes.string.isRequired,
      city: PropTypes.string.isRequired,
      zipcode: PropTypes.string.isRequired,
    }),
  }).isRequired,
};

修改后eslint报错会直接消失，不需要额外声明defaultProps。

两种方案的选型建议

如果你的组件正常渲染必须依赖完整的data参数，没有data时组件没有实际使用价值、也没有合适的兜底展示内容，优先选择加.isRequired：如果父组件未传data，开发环境下控制台会直接抛出PropTypes校验错误，能提前暴露传参遗漏问题。
如果你期望组件在未传入data时也能正常展示占位内容、骨架屏等，再选择配置defaultProps的方案。