Question

我了解使用组件数组时，键属性假定为数组的索引，应明确设置。是否建议明确规定这些孩子的孩子？

{arr.map(item, i) => {
  <Parent
    key={item.ID}
  >
    <Child
      key={`child${item.ID`}   //required to ensure correct reconciliation?
    />
  </Parent>
}

Answer 1

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份（source）

<div> <div style="display:inline-block;"> <input type="radio" name="choice-animals" id="choice-animals-dogs" required> <label for="choice-animals-dogs">I like dogs more</label> </div> <div class="reveal-if-active" style="display:inline-block;"> <label for="which-dog">Good call. What's the name of your favorite dog?</label> <input type="text" id="which-dog" name="which-dog" class="require-if-active" data-require-pair="#choice-animals-dogs"> </div> </div>的一般目的是优化React的渲染性能。如果您有一个项目列表，则提供一个密钥来告诉React如何记住该项目以用于后续渲染。如果使用数组索引，则可能违反key的目的（如果这些元素的顺序改变了）。 Its better to use a unique ID or something more specific to the entity being rendered。

在这种情况下，parent元素是需要键的，因此React可以进行优化。该“动态”元素的子代附加到该父代或其键，因此无需在子代上应用key。只是循环渲染的父母：）

Answer 2

否，您仅需要外部组件（父级）。 Documentation

Answer 3

只需要迭代最外层的项目即可设置键。据我所知，每个父级只有一个子级组件，因此在这种情况下无需担心自举键

Answer 4

您无需在子代上显式设置键。

以下是一篇有关使用键的好文章：https://reactjs.org/docs/lists-and-keys.html

明确建议不要将索引用作数组的键：

如果项目的顺序可能会改变，我们不建议使用索引作为键。这可能会对性能产生负面影响，并可能导致组件状态出现问题。查阅Robin Pokorny的文章，深入了解使用索引作为键的负面影响。如果您选择不为列表项分配显式键，那么React将默认使用索引作为键。

React中嵌套的关键属性需求

4 个答案: