Javascript 重用React'；键'；

我想知道在组件之间重用react键是正常的。在

行

组件中，我从列组件中获得了

键

，并将其重新用于映射

行

子组件

const Table=props=>{
const{data，children，showHeader}=props；
返回(
{showHeader&}
{data.map（数据=>{
返回；
})}
);
};
const TableHead=props=>{
const{children}=props；
返回(
{children.map（col=>{
const{title，field，width}=col.props；
返回(
{title}
);
})}
);
};
//在这里，我从Column组件获取键，并将其用于行（列数===行数）
常量行=道具=>{
const{data，children}=props；
返回(
{children.map（col=>{
设{field，…rest}=col.props；
常数{key}=col；
返回(
{React.cloneElement（col{
休息
领域
数据
})}
);
})}
);
};
const Column=props=>{
const{field，data，width}=props；
返回(
{数据[字段]}
);
};
恒水头=道具=>{
const{children}=props；
返回(
{children.map（col=>{
const{title，field，width}=col.props；
返回(
{title}
);
})}
);
};
常量initData=[
{
id:1，
姓名：“伊凡”，
年龄：“我的年龄是27岁”，
启用：对，
myListValue：[
{
我的名字：“邓肯”，
我的描述：“不朽！”，
myGroup:“不朽”，
创建日期：“2019-08-12T05:21:28Z”
}
],
lastChanged:新日期（），
可排序：正确
},
{
id:2，
姓名：“维塔利”，
年龄：`我的年龄是25\n我的年龄是25\n我的年龄是25\n`，
lastChanged:新日期（），
启用：对，
可排序：正确
},
{
id:3，
姓名：“谢尔盖”，
年龄：“我的年龄是29岁”，
启用：对，
myListValue：[
{
我的名字：“邓肯”，
我的描述：“不朽！”，
myGroup:“不朽”，
创建日期：“2019-08-12T05:21:28Z”
},
{
我的名字：“康纳”，
我的描述：“不朽2！”，
我的小组：“麦克劳德”，
创建日期：“2019-08-12T05:21:28Z”
},
{
我的名字：“约翰·斯诺”，
我的描述：“（他什么都不知道）”，
我的小组：“白行者”，
创建日期：“2019-08-12T05:21:28Z”
},
{
我的名字：“杰米·兰尼斯特”，
我的描述：“兰尼斯特人总是还债”，
myGroup:“红色城堡”，
创建日期：“2019-08-12T05:21:28Z”
}
],
lastChanged:新日期（）
}
];
ReactDOM.render(
，document.getElementById（'root'））

.App{
字体系列：无衬线；
文本对齐：居中；
显示器：flex；
柔性包装：包装；
}
.桌子{
边框：1px实心；
边框底部：无；
}
.表格行{
宽度：100%；
边框底部：1px实心；
显示器：flex；
}
.表列{
右边框：1px实心；
}
.表列：最后一个孩子{
边界：无；
}
.表格单元格{
空白：行前；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：10px；
框大小：边框框；
}
.桌上单元头{
字体大小：粗体；
}

键有助于识别哪些项已更改、已添加或已删除 删除

应该为数组中的元素指定键，以给它们一个稳定的标识，它们只在周围数组的上下文中才有意义，因此两个独立列表中的元素是否具有相同的键并不重要，只要它们在同一列表中不相等（重复ID）。以下代码没有问题

{
arr.map（（项目，索引）=>{
//每个“arr”迭代只定义一次键
常量键=唯一ID（索引）
返回(
{
arr2.map（（项目，索引）=>）
}
)
})
}

请注意，该键仅在特定父元素中相关。React不会尝试在不同的父级之间使用相同的键“匹配”元素。（React不支持在不同父级之间移动主机实例而不重新创建它。）

---

请参见

，据我所知，键属性在其同级中应该是唯一的。父组件的子组件可以再次使用相同的键。