尝试为自定义组件设置 Key 时出错

Question

将 React 与 Typescript 结合使用，我试图做一件简单的事情，即迭代对象集合并基于每个对象 - 创建自定义组件的实例。

鉴于我正在使用

map

函数，我确实获得了索引，因此我将其用作

key

。

问题：设置

key

时出现红色波浪状并显示消息：

输入 '{ imageSource: string;目标：字符串；标题：字符串；有间隙： 布尔 |不明确的;键：数字； }' 不可分配给类型 'IntrinsicAttributes & { hasGap?: 布尔值 |不明确的;图片来源： 细绳;标题：字符串；目标：字符串；禁用？：布尔值|不明确的; } & { 孩子？: ReactNode; }'。 属性“key”不存在于 类型 'IntrinsicAttributes & { hasGap?: boolean |不明确的; 图片来源：字符串；标题：字符串；目标：字符串；禁用？：布尔值 |不明确的; } & { 孩子？: ReactNode; }'.ts(2322)

现在根据我的理解，

key

属性应该默认存在于每个 React 组件上，所以我不明白这个错误来自哪里......

简单组件的示例，甚至没有使用

map

：

const MissingKeyComponent = () => {
  return(
    <div>Key cannot be passed when creating this component</div>
  )
}

<MissingKeyComponent key={100}></MissingKeyComponent>

在现实生活中的示例代码运行良好，浏览器没有显示任何错误，以及

Vite

输出...

如果我删除

key

，浏览器会在创建组件列表时显示有关缺少密钥的标准错误。

此外 - 我确实安装了 ESLint，以及 prettier。

我的

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx",
    "types": ["vite/client", "node"],

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "react": ["node_modules/@types/react"]
    }
  },
  "include": ["src", "types"],

  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

我的

.eslintrc.cjs

module.exports = {
  root: true,
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:@typescript-eslint/recommended-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'react/no-unknown-property': ['error', { ignore: ['css', 'tw'] }],
    '@typescript-eslint/no-unused-vars': ['warn'],
    'no-unused-vars': 'off',
  },
};

Answer 1

您是否尝试过简单地关闭编辑器并重新打开它？有时 VS code 会变得有点古怪。