Question

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

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

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

Answer 1

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

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

Answer 2

您可以分配索引号。

library(raster)
exR = raster(ex)

从React doc中查看“列表和键”部分：

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

并检查map方法的工作原理：

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

Answer 3

我不完全了解您要做什么，但是尝试像这样添加索引作为唯一ID：

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

Answer 4

您可以像<img id={index} />一样将index用作标记id，但不要将img key用作img，因为它是Anti Pattern，

您可以使用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}
    />
  ));

Answer 5

如果此处的img需要具有一些逻辑，则可以使其成为其自身的组成部分，因此仅是一个建议

将唯一的id属性添加到img标签

5 个答案: