React+TypeScript中map渲染button组件key属性ts(2322)报错求助

问题场景 #

在React+TypeScript环境下，使用数组map渲染<button>元素时，添加key属性触发TypeScript报错，提示key属性不存在于对应DOM元素类型中。

错误代码示例：

const sample = ['a', 'b', 'c']

{sample.map(_, index => (
  <button key={index}/>
))}

报错原因分析 #

1. 箭头函数参数语法错误：map回调的箭头函数包含多个参数时，必须用括号包裹。原代码中_, index =>缺少括号，导致TypeScript错误解析函数参数，进而引发key属性的类型校验异常。
2. React特殊属性的类型处理：key是React用于列表元素标识的特殊属性，不属于DOM元素的原生属性集合，TypeScript会基于DOM属性类型校验，若代码语法错误导致类型解析异常，就会触发该报错。

解决方案 #

1. 修正箭头函数参数语法 #

将map回调的参数用括号包裹，修正后的代码：

const sample = ['a', 'b', 'c'];

{sample.map((_, index) => (
  <button key={index}>{_}</button>
))}

2. 确保React类型定义正确 #

重新安装最新版的React类型定义，避免版本不匹配问题：

npm install @types/react@latest @types/react-dom@latest --save-dev

3. 验证tsconfig.json配置 #

确认compilerOptions中的jsx配置为react-jsx（React 17+推荐）或react，确保TypeScript能正确解析JSX语法：

{
  "compilerOptions": {
    // ...其他配置
    "jsx": "react-jsx"
  }
}

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