javascript - React JSX 中 key= {`note${note.id}` }> 和 key={note.id} 之间的区别？

Question

我正在学习 React 教程，作者有一些代码如下:

<li key={`note${note.id}`}>
        <Note task={note.task} />
      </li>

但是，如果您只是这样做，同样的代码也可以工作:

  <li className="note" key={note.id}>
                <Note task={note.task}/>
            </li>

在第一个例子中实际的 note.id 之前的 `note$ 的目的是什么？两者都有效，只是好奇为什么会这样。

Answer 1

<li key={`note${note.id}`}>相当于<li key={"note" + note.id}> .

在 React 中，key prop 用于协调渲染之间的元素。 DOM 组件的所有子元素都必须具有唯一键。参见 Reconciliation .

赋值note.id到 key你的 Prop <li> elements 确保它们都具有不同且唯一的键。前缀为 "note"如果您的父元素还包含其他元素，请确保没有重叠。

这是一个示例，其中必须为键添加前缀，因为 ID 可以在笔记和草稿之间共享。

var notes = [
  { id: 0, message: 'foo' },
  { id: 1, message: 'bar' },
];
var drafts = [
  { id: 0, message: 'foo' },
  { id: 1, message: 'bar' },
];
var children = notes.map(function(note) {
  return <li key={`note${note.id}`}><Note /></li>;
}).concat(drafts.map(function(draft) {
  return <li key={`draft${draft.id}`}><Draft /></li>;
}));
return <ul>{children}</ul>