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

两个例子设置的key不同

假设笔记对象的 id 为 1。

最上面的示例 key={'notes${note.id}'}> 将键属性设置为 'note1'。

底部示例 key={note.id} 将密钥设置为“1”。

它们都可以工作，因为 key 属性仅用于唯一标识组件的子项。 top one key="note1" 可能更好，只是因为它更具描述性、具体性和可读性。你可以想象一个 React 组件有不止一种子类型，如果它们都被赋予简单的数字键，它们的键可能会发生冲突。

这个

`${variableName}`

syntax 是新的 ES6 Javascript 字符串格式化语法，类似于 python 或 ruby 中的字符串插值。请参阅文档 here。

Answer 2

<li key={`note${note.id}`}> 等同于 <li key={"note" + note.id}>.

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

将值 note.id 分配给 <li> 元素的 key 属性可确保所有元素都具有不同且唯一的键。如果您的父元素还包含其他元素，则使用 "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>

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

Difference between key={`note${note.id}`}> and key={note.id} in React JSX?

javascript

reactjs

react-jsx