從另一個組件 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: 列，我想渲染“行”，但什么也沒發生。

有人能幫我嗎？

Answer 1

首先，我在.container不到flex-direction: row 。 我建議你創建一個包裝器而不是空標簽，因為你的key={i}不會在<Image />上工作（你只能在頂部組件上設置你的鍵）

Answer 2

我認為容器的寬度非常小，只有 22%，而您的圖像大小為 500x500。 您可以嘗試width: 100%或width: 100vw