JSON データ ソースを受け入れて並べ替え可能なテーブルを作成する React コンポーネントを構築しています。
各動的データ行には一意のキーが割り当てられていますが、それでも次のエラーが発生します。
配列内の各子には、一意の「key」プロパティが必要です。TableComponent
の render メソッドを確認してください。
私のTableComponentレンダリングメソッドは次を返します:
<table>
<thead key="thead">
<TableHeader columns={columnNames}/>
</thead>
<tbody key="tbody">
{ rows }
</tbody>
</table>
コンポーネントTableHeaderは単一の行であり、一意のキーも割り当てられています。
各rowin は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>
)
}
});
一意キープロパティエラーの原因は何ですか?
ベストアンサー1
各子と、 children 内の各要素にキーを追加する必要があります。
この方法では、React は最小限の DOM 変更を処理できます。
コードでは、それぞれが<TableRowItem key={item.id} data={item} columns={columnNames}/>キーなしでその内部のいくつかの子要素をレンダリングしようとしています。
チェックこの例。
div 内の要素key={i}から を削除してみてください(コンソールを確認してください)。<b></b>
サンプルでは、要素にキーを指定せず、のみを<b>更新する場合、React は要素だけでなく行全体を再レンダリングする必要があります。object.city
コードは次のとおりです:
const data = [
{ name: "Nuri", age: 28, city: "HO" },
{ name: "Talib", age: 82, city: "HN" },
{ name: "Jenny", age: 41, city: "IT" },
];
const ExampleComponent = React.createClass({
render: function () {
const infoData = this.props.info;
return (
<div>
{infoData.map((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(<ExampleComponent info={data} />, document.body);
@Chrisが下部に投稿した回答この回答よりもはるかに詳細に説明します。
キーの重要性と使用法に関する React ドキュメント:キー