从另一个组件Reactjs映射

Question

我已经从一个组件创建了一个数组数据(title、desc、images等(，并希望映射到另一个组件：

return (
<div className={styles.container}>
{data.map((pizza, i) => ( 
<>
<Image src={pizza.imgSrc} key={i} alt="" width="500" height="500" />
<h1 className={styles.title}>{pizza.title}</h1>
<span className={styles.price}>{pizza.price}</span>
<p className={styles.desc}>
{pizza.desc}
</p>
</>
))}
</div>
);

我的容器CSS:

.container {
width: 22%;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: center;
}

它只呈现灵活的方向：列，我想呈现"行"，但什么都没发生。

有人能帮我吗？

Answer 1

首先，我在.container中没有看到flex-direction: row。我建议你创建一个包装器，而不是空标签，因为你的key={i}不能在<Image />上工作(你可以只在顶部组件上设置密钥(

Answer 2

我认为容器的宽度太小了，只有22%，您的图像大小为500x500。你可以试试width: 100%或width: 100vw