useJsxKeyInIterable

JSX and TSX

摘要

¥Summary

规则生效日期：v1.6.0

¥Rule available since: v1.6.0
诊断类别：lint/correctness/useJsxKeyInIterable

¥Diagnostic Category: lint/correctness/useJsxKeyInIterable
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
此规则属于以下域：

¥This rule belongs to the following domains:
- react
- qwik
来源：

¥Sources:
- 与 react/jsx-key 相同
  
  ¥Same as react/jsx-key
- 与 qwik/jsx-key 相同
  
  ¥Same as qwik/jsx-key

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useJsxKeyInIterable": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

禁止在迭代器/集合文字中缺少关键属性。

¥Disallow missing key props in iterators/collection literals.

如果元素可能需要 key prop（即数组文字或箭头函数表达式中存在的元素），则发出警告。检查格式、检查导入是否组织好以及 lint

¥Warn if an element that likely requires a key prop—namely, one present in an array literal or an arrow function expression. Check out React documentation for explanation on the why does React need keys.

此规则适用于 React 和 Qwik 应用，以防止迭代器内部的 JSX 元素缺少关键 prop。

¥This rule is intended for use in both React and Qwik applications to prevent missing key props in JSX elements inside iterators.

示例

¥Examples

无效

¥Invalid

1
[<Hello />];

code-block.jsx:1:2 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing key property for this element in iterable.
  
  > 1 │ [<Hello />];
      │  ^^^^^^^^^
    2 │ 
  
  ℹ The order of the items may change, and having a key can help React identify which item was moved.
  
  ℹ Check the React documentation.

1
{items.map(item => <li>{item}</li>)}

code-block.jsx:1:20 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing key property for this element in iterable.
  
  > 1 │ {items.map(item => <li>{item}</li>)}
      │                    ^^^^
    2 │ 
  
  ℹ The order of the items may change, and having a key can help React identify which item was moved.
  
  ℹ Check the React documentation.

有效

¥Valid

1
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
2
{items.map(item => <li key={item.id}>{item}</li>)}

选项

¥Options

checkShorthandFragments

React 片段不仅可以使用 <React.Fragment> 创建，还可以使用简写片段 (<></>)。要同时检查这些文件是否需要键，请将 true 传递给此选项。

¥React fragments can not only be created with <React.Fragment>, but also with shorthand fragments (<></>). To also check if those require a key, pass true to this option.

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useJsxKeyInIterable": {
6
          "options": {
7
            "checkShorthandFragments": true
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
data.map((x) => <>{x}</>);

code-block.jsx:1:17 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing key property for this element in iterable.
  
  > 1 │ data.map((x) => <>{x}</>);
      │                 ^^^^^^^^
    2 │ 
  
  ℹ The order of the items may change, and having a key can help React identify which item was moved.
  
  ℹ Check the React documentation.

useJsxKeyInIterable

摘要

如何配置

描述

示例

无效

有效

选项

checkShorthandFragments

相关链接