您可以通过在每次向前一个容器添加六张图片时创建一个新容器来实现这一点。

import React, { useState } from "react";
import firebase from "firebase/app";
import "firebase/storage";
import styles from "./styles.module.css";

const storageRef = firebase.storage().ref();

function App() {
  const [imageList, setImageList] = useState([]);

  const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    const fileRef = storageRef.child(file.name);
    await fileRef.put(file);
    const imageUrl = await fileRef.getDownloadURL();
    setImageList([...imageList, imageUrl]);
  };

  const getContainers = () => {
    const containers = [];
    let currentContainer = [];
    for (let i = 0; i < imageList.length; i++) {
      currentContainer.push(
        <div className={styles.card}>
          <img src={imageList[i]} />
        </div>
      );
      if ((i + 1) % 6 === 0) {
        containers.push(
          <div className={styles.container}>{currentContainer}</div>
        );
        currentContainer = [];
      }
    }
    if (currentContainer.length > 0) {
      containers.push(
        <div className={styles.container}>{currentContainer}</div>
      );
    }
    return containers;
  };

  return (
    <div className="grid grid-rows-3 bg-black">
      {getContainers()}
      <div className={styles.container}>
        <input type="file" onChange={handleFileUpload} />
      </div>
    </div>
  );
}

export default App;

在此实现中，getContainers函数基于imageList状态创建容器数组。它初始化空的currentContainer数组，并在imageList上循环，为每个图像URL向currentContainer数组添加新的card元素。当currentContainer具有6个元素时，它将容器推送到containers数组并创建新的currentContainer。如果循环后imageList中还有剩余图像，这个函数将它们添加到最后一个容器中。2最后，这个函数返回一个容器数组。
注意文件输入元素在容器的外面，以保持它在一个固定的位置。你可能想要调整样式以适应你的需要。

您可以尝试使用Array.prototype.slice（）方法将图像列表分成两个数组，然后使用两个单独的贴图呈现它们。

const imageListLength = imageList.length;
let imageListTop, imageListBottom;

// Split image list into two arrays
if (imageListLength > 6) {
  imageListTop = imageList.slice(0, 6);
  imageListBottom = imageList.slice(6);
} else {
  imageListTop = imageList;
  imageListBottom = [];
}

return (
  <div className="grid grid-rows-3 bg-black">
    <div className={styles.container}>
      {imageListTop.map((url) => {
        return (
          <div className={styles.card}>
            <img src={url} />
          </div>
        );
      })}
    </div>
    {imageListBottom.length > 0 && (
      <div className={styles.container}>
        {imageListBottom.map((url) => {
          return (
            <div className={styles.card}>
              <img src={url} />
            </div>
          );
        })}
      </div>
    )}
  </div>
);

编辑记下您的答案：

你可以通过在渲染图像的代码中添加一个循环来扩展你的代码，这个循环将检查图像列表的长度，并以6个图像为一组渲染图像，直到列表用尽为止。

const imageListLength = imageList.length;
let imageListTop, imageListBottom;

if (imageListLength > 6) {
  imageListTop = imageList.slice(0, 6);
  imageListBottom = imageList.slice(6);
} else {
  imageListTop = imageList;
  imageListBottom = [];
}

return (
  <div className="grid grid-rows-3 bg-black">
    {/* Loop through the image list */}
    {imageList.map((url, index) => {
      if (index % 6 === 0) {
        return (
          <div className={styles.container}>
            {imageList.slice(index, index + 6).map((url) => {
              return (
                <div className={styles.card}>
                  <img src={url} />
                </div>
              );
            })}
          </div>
        );
      }
    })}
  </div>
);