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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在构建一个接受JSON数据源并创建可排序表的React组件。

每个动态数据行都有一个分配给它的唯一键，但是我仍然遇到以下错误：

数组中的每个子代都应具有唯一的“键”道具。

检查TableComponent的渲染方法。

我的TableComponent渲染方法返回：

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

该TableHeader组件是单行，并且还为其分配了唯一的键。

每个row输入rows都是通过具有唯一键的组件构建的：

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

是什么导致独特的按键道具错误？

回答：

您应该为每个子项 子项 添加一个键。

这样，React可以处理最小的DOM更改。

在您的代码中，每个用户<TableRowItemkey={item.id}data={item}columns={columnNames}/>都试图在其中渲染一些没有键的子级。

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

在示例中，如果我们不给钥匙<b>，而我们也希望更新 在object.city起反应需要重新渲染整个行VS只是元素。

这是代码：

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.js中数组子项的唯一键 的全部内容， 来源链接： utcz.com/qa/400684.html

回到顶部