React.js中如何通过Props实现4张不同图片的卡片展示

1. 准备多卡片数据 #

先创建一个包含所有卡片信息的数组，每个元素对应一张卡片的图片地址和替代文本：

const contactsData = [
  { id: 1, imgUrl: '/images/contact1.jpg', altText: '联系人1头像' },
  { id: 2, imgUrl: '/images/contact2.jpg', altText: '联系人2头像' },
  { id: 3, imgUrl: '/images/contact3.jpg', altText: '联系人3头像' },
  { id: 4, imgUrl: '/images/contact4.jpg', altText: '联系人4头像' }
];

注：id用于React列表渲染的唯一key，避免警告；imgUrl替换成你实际的图片路径

2. 修改Contact组件接收Props #

把原本硬编码的图片地址改成从props动态获取，支持接收外部传入的图片信息：

// 解构赋值写法（更简洁）
function Contact({ imgUrl, altText }) {
  return (
    <div className="contact-card">
      <img src={imgUrl} alt={altText} />
      {/* 其他卡片内容（如姓名、电话）也可以通过props传递 */}
    </div>
  );
}

// 或者基础props写法
function Contact(props) {
  return (
    <div className="contact-card">
      <img src={props.imgUrl} alt={props.altText} />
    </div>
  );
}

3. 循环渲染不同卡片 #

在父组件中通过map遍历数据数组，给每个Contact组件传递对应的props：

function App() {
  return (
    <div className="contacts-wrapper">
      {contactsData.map(contact => (
        <Contact 
          key={contact.id} 
          imgUrl={contact.imgUrl} 
          altText={contact.altText} 
        />
      ))}
    </div>
  );
}

问题原因说明 #

你之前重复显示同一张图片，本质是因为：

• 要么Contact组件里硬写了固定的图片路径，没有动态接收外部参数
• 要么渲染多个组件时，给所有Contact传了同一个图片地址

通过上述步骤，把图片数据抽离成数组，再通过props动态传递给每个组件，就能实现每张卡片显示不同图片。

内容的提问来源于stack exchange，提问作者Raaed Magdy