Javascript 如何在img标记中使用key属性do？

我有这个代码来制作一个图像数组，显示在屏幕上。但是，我不知道images数组中的key属性是什么意思。理想情况下，每当单击其中一个图像时，我都希望更改图像的src。如果我在图像中添加

id

或

className

属性，并使用

document.getElementById

查找它，我会得到以下警告：

警告：属性“%s”不匹配。当我呈现页面时，服务器：%s客户端：%s%s

。我正在为这个项目使用react和razzle。有人能告诉我如何做到这一点吗

var shuffle = require("shuffle-array"),
    animals = [
      "frog0",
      "frog1",
      // ...
      "seal1",
      "armadillo0",
      "armadillo1"
    ];

function whatami(img) {
  alert(img);
}
var images = shuffle(animals).map(image => {
  return (
    <img
      onClick={() => {
        whatami(image);
      }}
      key={image}
      src={"/animalgameback.jpg"}
    />
  );
});
const App = () => (
  <div>
    <h3>My razzle app</h3>
    <div>{images}</div>
  </div>
);

export default App;

var shuffle=require（“shuffle数组”），
动物=[
“frog0”，
“青蛙”，
// ...
“海豹1号”，
“犰狳”，
“犰狳1”
];
功能whatami（img）{
警报（img）；
}
var images=shuffle（动物）.map（图像=>{
返回(
);
});
常量应用=（）=>(
我的razzle应用程序
{图像}
);
导出默认应用程序；

键属性用作身份声明。它帮助渲染引擎决定应该重新渲染哪些元素

---

这在中得到了很好的解释。

您的方法在这里有很多问题。我强烈建议阅读React官方文档，了解如何在ReactJS中编写Javascript

让我们介绍一些基本知识。首先，您真的不应该在React中使用

document.getElementById

（除非情况非常糟糕，您正试图破解第三方库）。在大多数情况下，您使用prop

ref

来引用安装在DOM中的React节点。但是，给那些学习的人一些建议，让你从使用参考资料中获得乐趣，这样你就知道如何使用它们以及它们是做什么的。但是我建议，如果您“需要”一个引用或“需要”在运行时直接与React组件对话，那么您可能做错了什么

现在，由于您正试图基于用户事件或交互“更改”某些内容，因此这是状态管理的一个完美用例。React使每个组件都能够自封装有状态对象，并使用这些状态“触发”或重新呈现组件中的内容（由于此更新或更改）

什么是钥匙？它是一个唯一的标识符，您可以在显示虚拟DOM和真实DOM的每个呈现JSX组件上使用，该组件将按原样重新呈现，而不是卸载、更改和重新装载。通过一个键，React可以跟踪哪些组件是预期的，哪些是刚刚更新或安装的。您总是将JSX元素的键作为唯一id写入。如果您将两个id设置为相同的（请尝试并查看：），您会注意到它们在屏幕上呈现为1，一个替换另一个

我将这样写： 我制作了一个作为“查看器”的图像来显示单击了哪个图像，并在图像上附加了一个单击事件处理程序来更改状态。渲染函数检测图像源更改并重新渲染组件。因此，接收、使用和呈现新源

代码

import React，{Component}来自'React'；
常数动物_数据=[
‘frog0’、‘frog1’、‘sheep0’、‘sheep1’、‘snail0’、‘snail1’、‘mouse0’、‘mouse1’、‘bat0’、‘bat1’、‘walrus0’，
“海象1号”、“长颈鹿0号”、“长颈鹿1号”、“斑马0号”、“斑马1号”、“狗0号”、“狗1号”、“章鱼0号”、“章鱼1号”、“河马0号”，
“hippo1”、“camel0”、“camel1”、“pig0”、“pig1”、“rhino0”、“rhino1”、“rooster0”、“rooster1”、“panda0”、“panda1”，
‘turtle0’、‘turtle1’、‘浣熊0’、‘浣熊1’、‘北极熊0’、‘北极熊1’、‘狮子0’、‘狮子1’、‘野牛0’，
‘野牛1’、‘奥卡0’、‘奥卡1’、‘蛇0’、‘蛇1’、‘鲨鱼0’、‘鲨鱼1’、‘巨嘴鸟0’、‘巨嘴鸟1’、‘蝴蝶0’，
‘蝴蝶1’、‘食蚁兽0’、‘食蚁兽1’、‘海豹0’、‘海豹1’、‘犰狳0’、‘犰狳1’
]
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
imageSource:“animalgameback”，
};
}
render（）{
const{imageSource}=this.state；
返回(
);
});
返回图像；
}
__handleImageClick=animal=>event=>{
this.setState（{imageSource:animal}）；
};
}
导出默认应用程序

您也可以选中此项，因此key属性是一个react属性，用于跟踪数组中的项，它只是一个标识符，您应该在映射和返回jsx片段时添加它，因为它不仅仅与img标记相关。它可以是一个组件，也可以是jsx上使用的任何html标记？或者这可能吗？@Athreya如果我的答案是正确的，请你勾选它。泰