如何在 React 中进行插值

Question

我在 img 中有一个属性 src src="images/education.jpg"。图像写入 object.

const itemData = [
  {
    img: "image",
    title: "Education",
    src: "education.jpg",
  },
  {
img: "image2",
    title: "Cooking",
    src: "cooking.jpg",
},
];

如何插入这个字符串 src="images/{item.src}" 我知道，这是不正确的。

 {itemData.map((item) => (
      <ImageListItem key={item.img}>
        <img            
        src="images/education.jpg"
        />

Answer 1

你可以做到：

{itemData.map((item, i) => (
  <ImageListItem key={item.img}>
    <img src={"images/" + itemData[i].src} />
  </ImageListItem>
)}

或者您可以采用其他方式：

{itemData.map((item, i) => (
  <ImageListItem key={item.img}>
    <img src={`images/${itemData[i].src}`} />
  </ImageListItem>
)}

如何在 React 中进行插值

How to interpolate in React

reactjs

interpolation

src