react/require-default-props规则在TypeScript ESLint配置中失效问题

你遇到的问题核心是Airbnb的ESLint规则集（airbnb-typescript）保留了针对JavaScript的react/require-default-props规则，但该规则未适配TypeScript的函数参数默认值写法。

原因分析 #

在JavaScript React组件中，我们依赖defaultProps来设置可选props的默认值，但TypeScript支持直接在函数参数中定义默认值，这已经完全能满足需求。不过react/require-default-props规则并没有识别这种TS语法，依然强制要求显式声明defaultProps，因此触发了错误。

解决方案 #

方案1：关闭react/require-default-props规则（推荐）

既然TypeScript的参数默认值已经替代了defaultProps的作用，且TS的类型系统能更好地保障类型安全，直接关闭这个规则是最合理的选择。在你的.eslintrc的rules对象中添加：

"react/require-default-props": "off"

方案2：显式添加defaultProps（不推荐，冗余）

如果你不想关闭规则，可以在组件后重复声明defaultProps，即使已经有了参数默认值：

type Props = { message?: string, disableElevation?: boolean, };
const BoxError = ({ message = 'Oops! Something went wrong!', disableElevation = false }: Props) => {
  return ( <div>mybox error</div> )
}

BoxError.defaultProps = {
  message: 'Oops! Something went wrong!',
  disableElevation: false,
};

这种方法虽然能解决错误，但会导致代码冗余（需要重复写默认值），因此更推荐方案1。

补充说明 #

airbnb-typescript继承了Airbnb的基础JS规则，其中react/require-default-props是为JS组件设计的。在TS环境下，函数参数默认值是更简洁且类型安全的写法，关闭该规则不会影响代码质量，反而能减少冗余代码。

内容的提问来源于stack exchange，提问作者Webman