jsx-eslint/eslint-plugin-react

[react/jsx-key] Take advantage of type information, if available.

Open

#3,185 创建于 2022年1月21日

在 GitHub 查看
 (0 评论) (10 反应) (0 负责人)JavaScript (8,630 star) (2,797 fork)batch import
help wantedtypescript

描述

This issue was opened as a follow-up to #2258.

The problem

It's not uncommon to get props that then need to be spread over an element. Here's an abridged example from react-table:

const { rows } = useTable(/* ... */);
return (
  <tbody>
    {rows.map((row) => (
      <tr {...row.getRowProps()}>
        {row.cells.map((cell) => (
          <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
        ))}
      </tr>
    ))}
  </tbody>
);

Here, getRowProps() and getCellProps() provide a key property for you. Currently, react/jsx-key can't detect this and marks the tr and td elements as invalid.

A possible solution

With access to type information provided by something like typescript-eslint, this rule could get access to the names of spread properties and see if key is one of them.

贡献者指南

技术栈
javascripttypescriptreact
领域
frontendtooling
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
4
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-2 days
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
ESLint plugin developmentReact JSXTypeScript type system
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
40
研究方向
This issue proposes enhancing the `react/jsx key` rule to use type information from typescript eslint to detect 'key' in spread props (e.g., `{...getRowProps()}`). The implementor should first study the current rule implementation in `lib/rules/jsx key.js` and understand how it currently checks for keys. Then, they should explore the typescript eslint package to see if there is a way to access type information for spread expressions, possibly via `services.getTypeChecker()`. The linked issue #2258 provides additional context. Finally, they need to integrate this type checking into the rule's logic to suppress false positives when a key is present in the spread.