如何在 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中文網其他相關文章！