React项目执行yarn start报react/require-default-props等ESLint错误如何解决

这些报错是ESLint的react规范插件抛出的校验错误，不属于代码运行逻辑错误，是项目配置的编码规范校验不通过导致启动中断。
你重置提交、重新克隆仓库仍无法解决，常见触发原因有两个：

• 本地安装的eslint-plugin-react依赖版本高于项目之前的版本，新版本默认开启了react/require-default-props、react/no-unused-prop-types两条校验规则
• 本地ESLint全局配置覆盖了项目内的配置，主动开启了上述校验规则

你可以根据自己的需求选择以下任意一种方案处理：

方案1：按规范要求修复代码（推荐，符合React编码规范） #

• 先处理prefix未使用的报错：要么在Balance.tsx组件的逻辑中使用该prop，要么直接从组件入参、PropTypes定义中删除这个没用的prop
• 再处理非必填prop无默认值的报错：给value、unit两个非必填prop添加默认值，有两种常用写法：
  1. 函数组件默认参数写法（React 18+推荐）

  // 组件入参处直接加默认值
  const Balance = ({ value = 0, unit = '元', prefix = '' }: BalanceProps) => {
    // 组件逻辑
  }
  

  2. 传统defaultProps写法

  // 组件定义末尾加默认值配置
  Balance.defaultProps = {
    value: 0,
    unit: '元',
    prefix: ''
  }
  

方案2：关闭对应校验规则（适合快速绕过校验的场景） #

仅关闭当前文件的校验 #

在Balance.tsx文件最顶部添加注释即可：

/* eslint-disable react/require-default-props, react/no-unused-prop-types */

全局关闭项目的校验 #

找到项目根目录下的.eslintrc.js或.eslintrc.json配置文件，在rules字段中添加如下配置：

{
  "rules": {
    "react/require-default-props": "off",
    "react/no-unused-prop-types": "off"
  }
}

如果是TypeScript项目，也可以仅关闭函数组件的require-default-props校验，避免和TS可选类型冲突：

{
  "react/require-default-props": ["error", { "ignoreFunctionalComponents": true }]
}

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