在 ReactJS 中列出的键及其意义是什么？
ReactJS中的键有助于识别列表中的哪些项目已更改、删除或添加。在迭代列表时，键被用作我们的地图运算符的道具。我们不能将 React 中的键用作子组件的道具。主要推荐使用字符串作为唯一的键。
React 使用这些键在 DOM 元素和组件之间创建关系。它决定是否应该渲染组件。元素的唯一标识有助于跟踪 DOM 中的哪个元素已被更新、删除或添加。
语法：我们使用映射运算符来迭代返回项目的列表。
{list.map((item => {
return ({item} )
})}下面的示例将说明 React 中键的使用。
示例：我们将从构造简单的数组 nums 开始，然后迭代它。
App.js
const num = [1, 2, 3, 4];
function App() {
return (
{num.map(item => {
return (
);
})}
);
}
export default App;App.js
const num = [1, 2, 3, 4];
function App() {
return (
{num.map(item => {
return (
);
})}
);
}
export default App;App.js
const num = [1, 2, 3, 4, 1];
function App() {
return (
{num.map((item, index) => {
return (
)
})}
);
}
export default App;App.js
const colors = [
{
id: 1,
value: "red"
}, {
id: 2,
value: "green"
}, {
id: 3,
value: "black"
}
];
function App() {
return (
{colors.map(item => {
return (
)
})}
);
}
export default App;控制台日志：我们会看到错误，要求提供唯一键，以便更容易知道哪个元素已被编辑、更改或删除。
使用 key 属性：现在，我们将key属性添加到项目列表中。我们可以将项目本身用作键，因为数组包含不同的元素，因此不会有问题。
应用程序.js
const num = [1, 2, 3, 4];
function App() {
return (
{num.map(item => {
return (
);
})}
);
}
export default App;
控制台日志：现在，我们在控制台中看不到更多错误。
但是，这不是将键定义为具有重复元素的数组的理想方法，它将分配重复的键并且会引发错误。例如，使用下面的数组作为键，我们将得到以下输出。
const num = [1,2,3,4,1];控制台日志：将显示两个孩子拥有相同密钥的错误。
使用 map函数的索引作为键：我们还可以将 map函数提供的元素的索引作为列表项的键传递。这将消除项目本身不明确的情况。
应用程序.js
const num = [1, 2, 3, 4, 1];
function App() {
return (
{num.map((item, index) => {
return (
)
})}
);
}
export default App;
输出：
一个理想的解决方案：在动态列表的情况下，它可能被过滤或重新排序，上述方法将无法正常工作，导致组件行为不稳定。如果您已经在要显示的列表中提到了一个唯一的 id，那么您始终可以将其用作您的密钥。这是应该如何呈现列表的首选方式，因为这些唯一的 id 将帮助 React 理解元素的顺序。
示例：让我们假设一个颜色数组的示例，其中包含一些我们将用作键的 id。
应用程序.js
const colors = [
{
id: 1,
value: "red"
}, {
id: 2,
value: "green"
}, {
id: 3,
value: "black"
}
];
function App() {
return (
{colors.map(item => {
return (
)
})}
);
}
export default App;
输出：
