jsx-eslint/eslint-plugin-react

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

オープン

#3,185 opened on 2022/01/21

 (0 件のコメント) (10 件のリアクション) (0 人の担当者)JavaScript (2,731 件のフォーク)batch import
help wantedtypescript

Repository metrics

Stars
 (9,293 個のスター)
PR merge metrics
 (PR metrics pending)

説明

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.

コントリビューターガイド