Блог

Главная - Вопросы по программированию - Проблема с элементами сетки Material-UI

Проблема с элементами сетки Material-UI

#reactjs #material-ui

#reactjs #material-ui

Вопрос:

У меня возникла проблема с правильной работой системы grid для меня. В одном файле у меня есть эта настройка для отображения элементов блога:

     return (
    <div>
        {blogs != null
        ? (<Grid container direction="row" xs={12} md={4}>
                {blogs.map((blog) => {
                    console.log(blog);
                    return (
                        <div key={blog._id}>
                            <CardComp data={blog} />
                        </div>
                    )
                })}
            </Grid>)
        : ('loading....')}
    </div>
);

и в файле компонента card у меня есть следующий код:

     return (
       <Grid item direction="row">
           {data ? (
                   <Card className={classes.root} variant="outlined" >
                       <CardContent>
                           <Typography variant="h5" component="h2">
                               {blogs.title}
                           </Typography>
                           <Typography className={classes.pos} color="textSecondary">
                               {renderDate(blogs.createdAt)}
                           </Typography>
                           <Typography variant="body2" component="p">
                               <p>{blogs.description.substring(0,200)}</p>
                           </Typography>
                       </CardContent>
                       <Grid container alignItems={"center"} alignContent={"space-between"} className={classes.bottom} >
                           <Grid item>
                               <CardActions>
                                   <Button size="small" variant={"outlined"}>Read More</Button>
                               </CardActions>
                           </Grid>
                           <Grid item>
                                   <Grid container justify={"space-between"}>
                                       {blogs.tags.slice(0,3).map((tag, index) => {
                                           return(
                                               <>
                                                   <Button variant={"outlined"} color={"primary"} size={"small"}>{tag}</Button>
                                               </>
                                           )
                                       })}
                                   </Grid>
                           </Grid>
                       </Grid>
                   </Card>
               )
               :('Loading....')}
       </Grid>
);

Как вы можете видеть выше, я установил контейнер и направление для объекта перед рендерингом .map. Тем не менее, все отображается как показано ниже:
Экран ошибки

Комментарии:

1. Рассмотрите возможность использования отступа в 2 пробела для сильно вложенных блоков кода. Это делает код более читаемым, что увеличивает ваши шансы на быстрый ответ. Онлайн-редактор / форматер может сделать это за вас автоматически.

2. Попробуйте поместить сетку и контейнер сетки в один и тот же компонент. Ваш контейнер сетки должен появиться после отображения, и ваш элемент сетки обернет ваш компонент card. Также ключевым является предоставленный кем-то ответ.

Ответ №1:

Вам необходимо указать размер компонента карты, на которой он будет отображаться <Grid Item> . НЕ включен <Grid Container> .

Чтобы исправить ваше изменение кода:

<Grid container direction="row" xs={12} md={4}>

Для

<Grid container direction="row">

и изменить:

<Card className={classes.root} variant="outlined" >

Для

<Card className={classes.root} variant="outlined" xs={12} md={4}>

Проверьте документы и нажмите на значок развернуть, чтобы увидеть примеры: Сетка

Из документов. Базовая сетка, нажмите на значок <> внизу, чтобы развернуть исходный код.

 import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

Ответ №2:

<Grid item> должно быть внутри .map

 <Grid container>
   data.map(item => (
     <Grid item key={item.id} xs=12} md={4}> 
        <>
        {item.text}
        </>
     </Grid>
    ))
</Grid>