问题
我收到了这个警告:
警告:在数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。请检查EventsTable的渲染方法。有关更多信息,请参见fb.me/react-warning-keys。
react-runtime-dev.js?8fefd85d334323f8baa58410bac59b2a7f426ea7:21998 警告:在数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。请检查事件的渲染方法。有关更多信息,请参见fb.me/react-warning-keys。
源代码
这是EventsTable
:
EventsTable = React.createClass({
displayName: 'EventsTable',
render() {
console.dir(this.props.list);
return (
<table className="events-table">
<thead>
<tr>
{_.keys(this.props.list[0]).map(function (key) {
if (key !== 'attributes') {
return <th>{key}</th>;
}
})}
</tr>
</thead>
<tbody>
{this.props.list.map(function (row) {
return (
<Event key={row.WhatId} data={row} />
);
})}
</tbody>
</table>
)
}
});
这是事件(Event)
:
Event = React.createClass({
displayName: 'Event',
render() {
return (
<tr>
{_.keys(this.props.data).map((x) => {
if (x !== 'attributes')
return <td>{this.props.data[x]}</td>;
})}
</tr>
)
}
});
问题
很明显我在 <Event />
组件上设置了 key
属性。而且我遵循的约定是应该在组件上包含 key
,而不是在 HTML 标签(换句话说,在 Event
组件内部的 HTML 标签)上设置 key
。根据官方 React 文档:
key 应该直接提供给数组中的组件,而不是每个组件的容器 HTML 子元素中:
我非常困惑。为什么会收到警告?