在 React 中，我应该使用什么作为 "row" 元素的键？

Question

我有一个画廊，每行显示多本书。这个画廊将书籍数组作为道具，并使用“itemsPerRow”道具将书籍分块为二维数组，然后循环遍历所有书籍，以网格状结构显示书籍。

export default function Gallery({ items, itemsPerRow, renderLink }) {

    itemsPerRow = itemsPerRow ?? 3
    const rows = chunk(items, itemsPerRow)

    const renderEmptyItems = (itemsToRender) => {
        const items = []
        for(let n = itemsToRender; n > 0; n--) {
            items.push(<GalleryItem key={`empty_${n}`} empty/>)
        }

        return items
    }

    return (
        <div>
        {
            rows.map((row, index) => (
                <div key={index} className="tile is-ancestor">

                    {row.map(item => <GalleryItem key={item.id} renderLink={renderLink} {...item}/>)}

                    {/* Add empty gallery items to make rows even */}
                    {index + 1 === rows.length && renderEmptyItems(itemsPerRow - row.length)}
                </div>
            ))
        }
        </div>
    )
}

但是，除非我给代表一行的每个 div 一个键，否则 React 会抱怨缺少键。据我了解，使用索引作为键并不能真正帮助做出反应，应该避免。那么我应该在这里使用什么作为键 <div key={index} className="tile is-ancestor"> 而不是索引？

Answer 1

为 key 道具使用唯一标识符（book.id，如果它是唯一的，可能 book.title）。如果你的数据没有唯一标识符，使用index.

也可以

Answer 2

您需要指定一个唯一标识项目的值，例如 id。您可以阅读有关键 in the documentation.

的更多信息

此外，如果您的数据顺序可以更改，则不建议使用索引作为键，因为 React 依赖于键来了解哪些组件 re-render，我链接的文档进一步解释了这一点。

Answer 3

您可以使用 unique_identifier 区分每个文档（可能，您应该将文档 _id 作为行组件中的关键属性传递）

 <div className="row">
      {notes.map((item) => {
        return (
          <div key={note._id} className="col-md-6">
            <Component item={item} />
          </div>
        );
      })}
  </div>

在 React 中，我应该使用什么作为 "row" 元素的键？

What should I use as a key for "row" elements in react?

javascript

key

reactjs