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中,keyprop用于协调渲染之间的元素.DOM组件的所有子元素必须具有唯一键.请参阅对帐.

将值分配note.id给元素的keyprop <li>可确保所有元素都具有不同且唯一的键."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>