0

我正在使用 React 和 material-ui。我的目标是呈现一个网格容器，从一个外部 javascript 文件开始，导出它自己的数组。此网格每行必须有 3 个项目，但目前它仅将项目呈现在单个列上。这是代码：

import React from "react";
import CoffeeCard from "./CoffeeCard";
import { Grid } from "@material-ui/core";
import files from "./constants";

function Content() {
  return (
    <Grid direction="rows" container spacing={2}>
      <Grid item xs={12} sm={4}>
        {files.map((obj) => {
          return (
            <CoffeeCard
              title={obj.title}
              price={obj.price}
              description={obj.description}
              avatarUrl={obj.avatarUrl}
              imgSrc={obj.imgSrc}
            />
          );
        })}
      </Grid>
    </Grid>
  );
}

export default Content;
4

2 回答 2

2

您需要Grid在 map 函数中移动单个项目的嵌套组件。现在您的代码仅渲染 1 个Grid带有 children 的 item 组件，您需要为每一行渲染一个：

 <Grid direction="rows" container spacing={2}>
    {files.map((obj) => {
      return (
        <Grid item xs={12} sm={4}>
          <CoffeeCard
            title={obj.title}
            price={obj.price}
            description={obj.description}
            avatarUrl={obj.avatarUrl}
            imgSrc={obj.imgSrc}
          />
        </Grid>
      );
    })}
  </Grid>
</Grid>
于 2021-03-05T18:58:40.493 回答
1

问题是您如何使用<Grid />Material UI 中的组件。有关更多信息，请参阅其文档。Grid

值得注意的是，您希望您item包装每个单独的项目。正如你所拥有的，你有一个包装你的内容的项目。

因此，只需将您的返回值移至<Grid item>您的.map返回值：

import React from 'react';
import CoffeeCard from './CoffeeCard';
import { Grid } from '@material-ui/core';
import files from './constants';

function Content() {
  return (
    <Grid direction="rows" container spacing={2}>
      {files.map((obj) => {
        return (
          <Grid item xs={12} sm={4}>
            <CoffeeCard
              title={obj.title}
              price={obj.price}
              description={obj.description}
              avatarUrl={obj.avatarUrl}
              imgSrc={obj.imgSrc}
            />
          </Grid>
        );
      })}
    </Grid>
  );
}

export default Content;
于 2021-03-05T18:58:56.260 回答