了解 React.js 中数组子项的唯一键 [英] Understanding unique keys for array children in React.js
问题描述
我正在构建一个接受 JSON 数据源并创建可排序表的 React 组件.
每个动态数据行都有一个分配给它的唯一键,但我仍然收到以下错误:
数组中的每个孩子都应该有一个唯一的key"属性.
检查TableComponent的render方法.
我的 TableComponent
渲染方法返回:
<thead key="thead"><TableHeader columns={columnNames}/></thead><tbody key="tbody">{行}</tbody>
TableHeader
组件是单行,并且还分配有唯一键.
rows
中的每个 row
都由一个具有唯一键的组件构建:
TableRowItem
看起来像这样:
var TableRowItem = React.createClass({渲染:函数(){var td = 函数(){返回 this.props.columns.map(function(c) {return <td key={this.props.data[c]}>{this.props.data[c]}</td>;}, 这个);}.bind(this);返回 (<tr>{ td(this.props.item) }</tr>)}});
是什么导致了唯一键属性错误?
您应该为每个子元素以及子元素中的每个元素添加一个键.
这样 React 可以处理最小的 DOM 变化.
在您的代码中,每个 <TableRowItem key={item.id} data={item} columns={columnNames}/>
都试图在没有键的情况下呈现其中的一些子项.
检查这个例子.
尝试从 div 内的 <b></b>
元素中删除 key={i}
(并检查控制台).
在示例中,如果我们没有给 <b>
元素提供一个键,并且我们希望更新仅object.city
,React 需要重新渲染整行而不是元素.
代码如下:
var data = [{name:'Jhon', age:28, city:'HO'},{name:'Onhj', age:82, city:'HN'},{名称:'Nohj',年龄:41,城市:'IT'}];var Hello = React.createClass({渲染:函数(){var _data = this.props.info;控制台日志(_数据);返回(<div>{_data.map(function(object, i){return ;})}
);}});React.render(<Hello info={data}/>, document.body);
底部 @Chris 发布的答案比这个答案更详细.请查看https://stackoverflow.com/a/43892905/2325522
关于密钥在协调中的重要性的 React 文档:密钥
I'm building a React component that accepts a JSON data source and creates a sortable table.
Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of:
Each child in an array should have a unique "key" prop.
Check the render method of TableComponent.
My TableComponent
render method returns:
<table>
<thead key="thead">
<TableHeader columns={columnNames}/>
</thead>
<tbody key="tbody">
{ rows }
</tbody>
</table>
The TableHeader
component is a single row and also has a unique key assigned to it.
Each row
in rows
is built from a component with a unique key:
<TableRowItem key={item.id} data={item} columns={columnNames}/>
And the TableRowItem
looks like this:
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>
)
}
});
What is causing the unique key prop error?
You should add a key to each child as well as each element inside children.
This way React can handle the minimal DOM change.
In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/>
is trying to render some children inside them without a key.
Check this example.
Try removing the key={i}
from the <b></b>
element inside the div's (and check the console).
In the sample, if we don't give a key to the <b>
element and we want to update only the object.city
, React needs to re-render the whole row vs just the element.
Here is the code:
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);
The answer posted by @Chris at the bottom goes into much more detail than this answer. Please take a look at https://stackoverflow.com/a/43892905/2325522
React documentation on the importance of keys in reconciliation: Keys
这篇关于了解 React.js 中数组子项的唯一键的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!