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道具用于协调渲染之间的元素。 DOM组件的所有子元素必须具有唯一键。请参阅Reconciliation。

将值note.id分配给key元素的<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>

Answer 2

这两个例子是设置不同的密钥。

假设note对象的id为1。

顶部示例key={'notes${note.id}'}>将关键属性设置为“note1”。

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

它们都可以工作，因为key属性仅用于唯一标识组件的子项。最上面的一个键=“note1”可能更好，因为它更具描述性，具体和可读性。你可以想象一个具有多种类型子节点的React组件，如果它们都被赋予了简单的数字键，它们的键就会发生冲突。

此

`${variableName}`

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

key = {`note $ {note.id}`}＆gt;之间的区别和React JSX中的key = {note.id}？

2 个答案: