时间戳

首页 > 解决方案 > React 独特的 key 道具

reactjs - React 独特的 key 道具

问题描述

我在 React 文档中读到键不是全局唯一的，并且每个兄弟姐妹都应该是唯一的，但是为什么这段代码有效？

import React from 'react'
import ReactDOM from 'react-dom'

const people = [
   {name: 'John', age: 20},
   {name: 'Danny', age: 35}, 
   {name: 'Rebecca', age: 18}, 
]
const element = (
  <ul>
    {people.map((person, index) => (
      <li key={index}>{person.name}</li>
    ))}

    {people.map((person, index) => (
      <li key={index}>{person.name}</li>
    ))}
  </ul>
)

ReactDOM.render(
element,
document.getElementById("root")
)

不是所有的结果<li>元素都被认为是同级元素，那么为什么我没有收到任何警告说有两个元素具有相同的键？

标签： reactjsjsx

解决方案

我认为文档中使用“兄弟姐妹”一词的方式是指 javascript 数组中的兄弟姐妹，这可能与渲染的 DOM 树中的兄弟姐妹不对应。所以<li/>节点渲染到同一个<ul/>父节点并不重要，React 会将它们视为两个不同的组件数组。

键只能在兄弟姐妹中唯一

数组中使用的键在它们的兄弟中应该是唯一的。但是，它们不需要是全球唯一的。当我们生成两个不同的数组时，我们可以使用相同的键。

https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

推荐阅读