javascript - React 中生成的表的键定义

Question

我很想知道如何在 React 中生成一个动态表，但是为我的每一行数据提供适当的键以便 React 完成它神奇的事情。

这是我正在做的简单表/行生成示例。

const listItems = (row, index) => (
  row.map(item => (
    <td key={item + index}>
      {item}
    </td>
  ))
);

const listRows = (rows) => {
  if (!rows) {
    return [];
  }
  return rows.map((row, index) => {
    const key = row[0] + index;
    return (
      <tr key={key}>
        {listItems(row)}
      </tr>
    );
  });
};
const listHeaderItems = (headers) => {
  if (!headers) {
    return [];
  }
  return headers.map((item, key) => (
    <th key={key}>
      {item}
    </th>
  ));
};

这两个问题:

1. 使用字段值作为键，任意的、重复的、有时是空的值作为键是不合格的。毫无 react 。
2. 我对问题 1 的解决方案产生了一个新问题。使用数组索引值作为键。从 eslint 的 Angular 来看，这被视为禁忌，并且由于性能副作用而被视为反模式。 no-array-index-key , React array index anti pattern

我很乐意帮助 React 凭借其 shadow dom 的强大功能变得更加神奇，但我对如何实现这一目标感到有些困惑。

总结:

如何为不能用作键的表数据提供 React 唯一键索引？

Answer 1

我个人使用short-id生成 key 。

它会生成一系列您可以使用的随 secret 钥。

基本上用 key={shortid.generate()} 替换所有的 key={...}