从另一个组件 Reactjs 映射

Question

我已经从一个组件为（标题、描述、图像等...）创建了一个数组数据，并希望在另一个组件中进行映射：

    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;
}

仅渲染 flex-direction: 列，我想渲染 'row' 但没有任何反应。

有人可以帮助我吗？

Answer 1

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

Answer 2

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

从另一个组件 Reactjs 映射

mapping from another component Reactjs

javascript

mapping

reactjs