要实现每次添加不同的图像,重用Card组件而不是复制粘贴整个代码,可以通过以下步骤来实现:
下面是一个示例代码:
// Card组件
const Card = (props) => {
return (
<div className="card">
<img src={props.imageUrl} alt="Card Image" />
<h3>{props.title}</h3>
<p>{props.description}</p>
</div>
);
};
// 父组件
const ParentComponent = () => {
// 存储图像URL的数组
const imageUrls = [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
];
return (
<div>
{imageUrls.map((imageUrl, index) => (
<Card
key={index}
imageUrl={imageUrl}
title="Card Title"
description="Card Description"
/>
))}
</div>
);
};
在上述示例中,我们创建了一个Card组件,该组件接收图像URL作为props,并将其应用到图像容器中。在父组件中,我们使用map函数遍历存储图像URL的数组,并将每个图像URL传递给Card组件,从而实现了重用Card组件并显示不同的图像。
请注意,上述示例中的代码仅为示意,实际应用中可能需要根据具体需求进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云