Javascript array.map（）不会在React中水平呈现网格容器中的项

我正在使用React和materialui。 我的目标是呈现一个网格容器，从一个外部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;

从“React”导入React；
从“/CoffeeCard”导入咖啡卡；
从“@material ui/core”导入{Grid}”；
从“/constants”导入文件；
函数内容（）{
返回(
{files.map（（obj）=>{
返回(
);
})}
);
}
导出默认内容；

您需要将嵌套的

网格

组件移动到map函数中的各个项目。现在，您的代码仅渲染1

Grid

item组件及其子项，您需要为每行渲染一个：

{files.map（（obj）=>{
返回(
);
})}

您需要将嵌套的

网格

组件移动到map函数中的各个项目。现在，您的代码仅渲染1

Grid

item组件及其子项，您需要为每行渲染一个：

{files.map（（obj）=>{
返回(
);
})}

问题在于如何使用Material UI中的

组件。有关更多信息，请参阅

值得注意的是，您希望您的

项目

包装每个单独的项目。正如您所拥有的，您有一个单独的项目来包装您的内容

因此，只需将

移动到

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

从“React”导入React；
从“./CoffeeCard”导入咖啡卡；
从'@material ui/core'导入{Grid}；
从“./constants”导入文件；
函数内容（）{
返回(
{files.map（（obj）=>{
返回(
);
})}
);
}
导出默认内容；

问题在于如何使用Material UI中的

组件。有关更多信息，请参阅

值得注意的是，您希望您的

项目

包装每个单独的项目。正如您所拥有的，您有一个单独的项目来包装您的内容

因此，只需将

移动到

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

从“React”导入React；
从“./CoffeeCard”导入咖啡卡；
从'@material ui/core'导入{Grid}；
从“./constants”导入文件；
函数内容（）{
返回(
{files.map（（obj）=>{
返回(
);
})}
);
}
导出默认内容；