使用 Material-ui 库反应渲染问题

Question

我在使用 React 和使用 material-ui 库时遇到问题。我的卡片是垂直渲染的，而不是水平并排的。我试着弄乱了反应网格组件，但没有帮助。

输出：

预期：

这是完美并排呈现卡片的原始代码：https://github.com/acm-uic/roll-call/blob/feature/home-page/src/App.tsx

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar position="relative">
        <Toolbar>
          <Typography variant="h6" color="inherit" noWrap>
            ACM Roll Call
          </Typography>
        </Toolbar>
      </AppBar>
      <main>
        {/* Hero unit */}
        <div className={classes.heroContent}>
          <Container maxWidth="sm">
            <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
              ACM Roll Call
            </Typography>
            <Typography variant="h5" align="center" color="textSecondary" paragraph>
            The Association for Computing Machinery Student Chapter at the University of Illinois at Chicago (ACM@UIC) is a community for all UIC students interested in computing, computing machinery and related technologies.
            </Typography>

          </Container>
        </div>
        <Container className={classes.cardGrid} maxWidth="md">
          {/* End hero unit */}
          <Grid container spacing={4}>
            {cards.map(card => (
              <Grid item key={card} xs={12} sm={6} md={4}>
                <Card className={classes.card} raised>
                  <CardMedia
                    className={classes.cardMedia}
                    image="https://avatars3.githubusercontent.com/u/20177515?s=280&v=4"
                    title="Image title"
                  />
                  <CardContent className={classes.cardContent}>
                    <Typography gutterBottom variant="h5" component="h2">
                      Event Name
                    </Typography>
                    <Typography>
                      This is a media card. You can use this section to describe the content.
                    </Typography>
                  </CardContent>
                  <CardActions>
                    <Button size="small" color="primary">
                      View
                    </Button>
                    <Button size="small" color="primary">
                      Edit
                    </Button>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Container>
      </main>
      {/* Footer */}
      <footer className={classes.footer}>
        <Typography variant="h6" align="center" gutterBottom>
          ACM Roll Call
        </Typography>
        <Typography variant="subtitle1" align="center" color="textSecondary" component="p">
          Attendance tracking for events and meetings
        </Typography>
      </footer>
      {/* End footer */}
    </React.Fragment>
  );

我修改了原始代码，因为我必须为卡片获取数据。这是两个单独文件（Event.tsx 和 Events.tsx）中的修改版本：https://github.com/acm-uic/roll-call/tree/feature/printEvents/src/components

return (



<React.Fragment>
<CssBaseline />

  <Container className={classes.cardGrid} maxWidth="md">
    {/* End hero unit */}
    <Grid container spacing={4}>
      {cards.map(card => (
        <Grid item key={card} xs={12} sm={6} md={4}>
          <Card className={classes.card} raised>
            <CardMedia
              className={classes.cardMedia}
              image="https://avatars3.githubusercontent.com/u/20177515?s=280&v=4"
              title="Image title"
            />
            <CardContent className={classes.cardContent}>
              <Typography gutterBottom variant="h5" component="h2">

              {summary ? summary : 'Busy'}

              </Typography>
              <Typography>

        <div>  
            {start ? (start.dateTime ? start.dateTime : start.date) : <></>} | {end ? (end.dateTime ? end.dateTime : end.date) : <></>} | {location}
        </div>

              </Typography>
            </CardContent>
            <CardActions>
              <Button size="small" color="primary">

                
                View
              </Button>
              <Button size="small" color="primary">
                Edit
              </Button>
            </CardActions>
          </Card>
        </Grid>
      ))}
    </Grid>
  </Container>


</React.Fragment>
    );

Answer 1

您可以在 Grid 上使用 MUI 的自动布局功能来帮助您自定义卡片渲染。

import React from 'react';
import { Grid } from '@material-ui/core';
import CardData from 'path to get your data'; // Data must be an array 

export default const Main = props => {
    return (
        <Grid container direction="row" justify="center" alignItems="center" spacing={3}>
            {
                CardData.map(data => (
                    <Grid item xs sm md lg key={data.key}>
                        <CustomCard data={data} />
                    </Grid>
                ))
            }
        </Grid>
    );
}

通过仅提供不带编号的属性 xs、md、sm、lg 和 xl，MUI 将在同一行内尽可能平等地为您进行堆叠。因此，您需要做的就是调整卡片内容的大小，以允许在同一行内放置多张卡片。

Answer 2

我下载了你的 repo 并在我的机器上运行它。它只呈现 AppBar，所以请告诉我如何获取要显示的数据。但是，我也查看了代码，并注意到一件事。 我们正在循环遍历事件和渲染组件，如下所示：

 {(this.state.events && this.state.events.items)
    ? this.state.events.items.map((ev, key) =>
        (<Event key={key} ev={ev} />)) //render material card for each event
    : (<></>)}

但是<Container /> and <Grid /> 组件是从<Event /> 组件渲染的。这意味着事件卡将包含在其自己的容器和网格中。在我看来，这可能是导致问题的原因。 如果我们将容器和网格从 Event.tsx 中拉出并放入 Events.tsx 中，那么它可能会修复它。

例如，

<Container>
<Grid ..>
this.state.events.items.map((ev, key) =>
            (<Event key={key} ev={ev} />)) //render material card for each event
        : (<></>)}
</Grid .. />
<Container />