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

小编典典

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

all

我正在构建一个接受 JSON 数据源并创建可排序表的 React 组件。
每个动态数据行都有一个分配给它的唯一键，但我仍然收到以下错误：

数组中的每个孩子都应该有一个唯一的“关键”道具。
检查 TableComponent 的渲染方法。

我的TableComponent渲染方法返回：

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

该TableHeader组件是单行，并且还分配有一个唯一键。

每个rowinrows都是由具有唯一键的组件构建的：

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

是什么导致了唯一键道具错误？

阅读 118

2022-03-01

共1个答案

小编典典

您应该为每个 child以及 children 中的每个元素 添加一个键。

这种方式 React 可以处理最小的 DOM 更改。

在您的代码中，每个<TableRowItem key={item.id} data={item} columns={columnNames}/>人都试图在没有密钥的情况下在其中呈现一些孩子。

检查这个例子。

尝试key={i}从<b></b>div 内的元素中删除（并检查控制台）。

在示例中，如果我们没有为元素提供键并且*<b>我们只想更新，React 需要重新渲染整行而不是元素。 *object.city

这是代码：

var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

var Hello = React.createClass({

    render: function() {

      var _data = this.props.info;
      console.log(_data);
      return(
        <div>
            {_data.map(function(object, i){
               return <div className={"row"} key={i}> 
                          {[ object.name ,
                             // remove the key
                             <b className="fosfo" key={i}> {object.city} </b> , 
                             object.age
                          ]}
                      </div>; 
             })}
        </div>
       );
    }
});

React.render(<Hello info={data} />, document.body);

React
文档中关于键在对账中的重要性：Keys

2022-03-01