如何在 React.js 中为数组子级正确分配唯一键？

了解 React.js 中数组子元素的唯一键

在 React 中使用动态表时，为每个子元素分配唯一键是对于高效渲染至关重要。然而，遇到像“数组中的每个子项都应该有一个唯一的‘key’属性”这样的错误可能会令人沮丧。

考虑以下代码片段：

render: function() {
  return (
    <table key="table">
      <thead key="thead">
        <TableHeader columns={columnNames} />
      </thead>
      <tbody key="tbody">
        {rows}
      </tbody>
    </table>
  );
}

虽然 TableComponent 有一个分配给它的键，rows 变量中的每个行元素都缺少唯一键。这将触发上述错误。

要解决此问题，请确保每个数组子项都有唯一的键。在这种情况下，每个 TableRowItem 组件都应该有自己的键：

<TableRowItem key={item.id} data={item} columns={columnNames} />

此外，每个数组子级中的 子级也需要唯一的键。在提供的 TableRowItem 组件中：

var TableRowItem = React.createClass({
  render: function() {
    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

    return (
      <tr>{td(this.props.item)}</tr>
    )
  }
});

每个 td 元素都应该分配一个键，以确保 React 在更新表时可以进行最小的 DOM 更改。未能为数组子项中的每个子项提供键可能会导致需要重新渲染整行，而不仅仅是更新的元素。

通过遵循这些准则，您可以确保动态渲染的高效React 中的表，具有分配给数组子项及其元素的唯一键。请参阅有关 Keys 的 React 文档以获取更多见解和最佳实践。

以上是如何在 React.js 中为数组子级正确分配唯一键？的详细内容。更多信息请关注PHP中文网其他相关文章！