javascript 如何在react.js中使用 prop 显示4张不同图像的卡片

tjvv9vkg  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(97)

我不能在屏幕上显示我的纸牌图像它只显示一个图像repeat
enter image description here
[一个月一个月](一个月二个月)
enter image description here
enter image description here
enter image description here
我不知道我还在学习React

xbp102n0

xbp102n01#

最好的解决方案是在contact组件中以propon line 12的形式发送图像

<img src={prop.image} alt=""/>

那么你可以使用下面的步骤来使你的代码更加优化:

**1 -**创建包含所有数据的变量

const data = [
  {
    name: "something",
    email: "someting",
    phone: "some number",
    image: require("image Path"),
  },
  {
    name: "something",
    email: "someting",
    phone: "some number",
    image: require("image Path"),
  }
]

**2 -**使用.map()自动生成代码,这将减少代码行。

data.map((item, index) => <Contact key={index} name={item.name} email={item.email} phone={item.phone} image={item.image}/>)

**3 -**在Contact组件中使用图像 prop on line 12

<img src={prop.image} alt=""/>

编辑

你得这么放。

相关问题