在React中,html标记中key属性的功能是什么

Question

p标签中key属性的功能是什么？我检查了dom,我希望看到taco列表中每个元素的p标签<p taco-1>,但它只是<p>.任何解释将非常感激.

{this.props.tacos.map( ( taco, i ) => {
    return <p key={ `taco-${ i }` }>{ taco }</p>;
})}

Answer 1

它由组件集合中的react使用,以查看插入哪个元素,删除哪个元素以及更新哪个元素.没有key属性,很难确定如何更新集合.

例如,请参阅下面的组件集合:

<ul>
    <li>England</li>
    <li>France</li>
</ul>

然后下一个状态告诉反应渲染:

<ul>
    <li>England</li>
    <li>Germany</li>
</ul>

有多种方法可以更新DOM:

• 改变第二个内部文本 <li>
• 删除第二个<li>并添加一个新的

没有钥匙,反应就不知道选择哪一个.

您可以在文档中阅读更多内容.