解构react-table的key prop时ESLint误报缺少key问题求助

问题场景 #

使用react-table时，通过{...headerGroup.getHeaderGroupProps()}解构传递props，ESLint抛出「Missing "key" prop for element in iterator react/jsx-key」错误，但getHeaderGroupProps()实际上已经包含了key属性。手动添加key={headerGroup.getHeaderGroupProps().key}会导致key重复定义，调换顺序则触发「'key' is specified more than once」错误。

相关配置及版本：

.eslintrc.js #

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/semi": "warn"
    }
}

依赖版本 #

"react-table": "^7.8.0"
"react": "^18.2.0"
"eslint": "^8.24.0"

解决方案 #

1. 临时禁用该行ESLint规则 #

ESLint的react/jsx-key是静态检查，无法识别getHeaderGroupProps()返回的对象中包含key属性，直接在报错的JSX行添加注释禁用该规则即可：

// eslint-disable-next-line react/jsx-key
<tr {...headerGroup.getHeaderGroupProps()}>
  {/* 表头单元格内容 */}
</tr>

2. 提前缓存props对象 #

将getHeaderGroupProps()的返回值提前赋值给变量再解构，部分场景下能让ESLint识别到key的存在：

const headerProps = headerGroup.getHeaderGroupProps();
<tr {...headerProps}>
  {/* 表头单元格内容 */}
</tr>

3. 全局调整ESLint规则（不推荐） #

如果项目中多处出现该误报，可在.eslintrc.js中针对性调整规则，但不建议全局放宽检查标准：

module.exports = {
  // ...其他配置
  rules: {
    // ...其他规则
    "react/jsx-key": ["error", { "checkFragmentShorthand": true, "warnOnDuplicates": true }]
    // 或通过overrides字段给特定文件添加规则豁免
  }
}

最优方案：优先使用第一种临时禁用的方式，既解决误报又不破坏全局规则的严格性。

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