array.map() не изобразява елементи хоризонтално в мрежов контейнер в React

Използвам 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;

reactjs javascript html material-ui
person Ale Mari    schedule 05.03.2021    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Трябва да преместите вложения Grid компонент за отделни елементи във функцията за карта. В момента вашият код изобразява само 1 Grid компонент на елемент с деца, трябва да изобразявате по един за всеки ред:

 <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>
person Nick    schedule 05.03.2021

arrow_upward
1
arrow_downward

Проблемът е как използвате компонента <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;
person romellem    schedule 05.03.2021