为什么我的 React Array 子级需要唯一的键？

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

在 React 中，为数组子项分配唯一键以优化性能非常重要并避免不必要的重新渲染。

问题：
在使用JSON数据来源。

调查：

``

{rows}

``
``
var TableRowItem = React.createClass( {
渲染：函数() {

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>);

}
});
``

解决方案：
问题源于缺少唯一键在 TableRowItem 组件中呈现的元素。

为了确保 rows 数组中的每个子项都有唯一的 key 属性，您还必须向 TableRowItem 组件中的元素添加键。

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.key + '-' + c}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);

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

通过向

添加唯一键元素，React 可以跟踪各个元素并执行高效的更新，防止不必要的整行重新渲染。

以上是为什么我的 React Array 子级需要唯一的键？的详细内容。更多信息请关注PHP中文网其他相关文章！