Javascript 对材质ui库的渲染问题作出反应

我对React和使用材质ui库有问题。我的卡片是垂直渲染的，而不是水平并排渲染的。我试着去摆弄react网格组件，但没用

输出：

预期：

以下是完美呈现并排卡片的原始代码：

返回(
点名
{/*英雄单位*/}
点名
芝加哥伊利诺伊大学计算机械协会学生章ACM@UIC)是一个面向所有对计算、计算机械和相关技术感兴趣的UIC学生的社区。
{/*结束英雄单元*/}
{cards.map（card=>(
事件名称
这是一张媒体卡。您可以使用此部分描述内容。
看法
编辑
))}
{/*页脚*/}
点名
活动和会议的出席情况跟踪
{/*结束页脚*/}
);您可以在网格上使用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>
    );
}

从“React”导入React；
从'@material ui/core'导入{Grid}；
从“获取数据的路径”导入CardData；//数据必须是数组
导出默认常量Main=props=>{
返回(
{
CardData.map（数据=>(
))
}
);
}

通过只提供属性xs、md、sm、lg和xl而不提供编号，MUI将在同一行中为您尽可能平等地进行堆叠。因此，您所需要做的就是调整卡片内容的大小，以便在同一行中放置多张卡片
 我下载了你的回购协议，并在我的机器上运行了它。它只渲染了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
    : (<></>)}

{（this.state.events&&this.state.events.items）
？此.state.events.items.map（（ev，键）=>
（））//为每个事件渲染材质卡
: ()}

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

e、 g

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


this.state.events.items.map（（ev，key）=>
（））//为每个事件渲染材质卡
: ()}