将唯一 id 属性添加到 img 标记

我正在尝试在映射时为每个img标签添加一个唯一的id属性，以便我可以将其用于其他逻辑我该怎么做？

const imgs = image.map(img => (
    <img
      id={???}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}
    />
  ));

我希望 .map 在每个映射的 img id 上将 0 添加到 ..

您可以分配索引号。

const imgs = image.map((img, index) => {
    <img
      id={index}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}
    />
});

查看 React 文档中的列表和键部分：

https://reactjs.org/docs/lists-and-keys.html

并检查映射方法的工作原理：

https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const imgs = image.map((img, index) => {
    <img
      id={index}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}
    />
});

.map 方法将返回从 0 开始的索引。

我不完全明白你想做什么，但尝试添加一个索引作为唯一 id，如下所示：

image.map((img,index) => (
    <img
      id={index}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}
    />
  ));

你可以像<img id={index} />一样使用index作为标签ID，但不要使用index作为img key因为它是一个反模式，

相反，您可以使用像 react-key-index 这样的插件

假设你有一个图像 src 数组，你可以使用 react-key-index 为每个数组项制作唯一的 id：

import keyIndex from 'react-key-index';
const images = [
  "src1",
  "src2",
  "src3"
]
var output = keyIndex(images, 1);

输出将如下所示：

// output
[
  {
    value: "src1",
    id: "kRf6c2fY"
  }, {
    value: "src2",
    id: "lYf5cGfM",
  }, {
    value: "src3",
    id: "mZfKcGf9"
  }
]

现在您可以映射它：

const imgs = output.map(img => (
    <img
      id={img.id}
      key={img.id}
      src={img.value}
      onClick={onClickHandler}
    />
  ));

如果这里的img需要有一些逻辑，那么也许让它成为它自己的组件，所以只是一个建议

相关内容

最新更新

热门标签：