横向映射材质UI网格

Question

我正在使用材质UI网格和卡片来创建卡片网格。

这是我的代码：

class CardList extends React.Component {

render() {
const cardComponent = CardSeed.cards.map((card) => (
<Card
className="cards"
key={'card-' + card.id}
id={card.id}
header={card.header}
title={card.title}
category={card.category}
summary={card.summary}
/>
));
return (
<Grid direction="row" container spacing={4}>
<Grid item xs={1}>
{cardComponent}
</Grid>
</Grid>
);
}
}
export default CardList;

我想知道为什么网格是垂直渲染而不是水平渲染，如果没有贴图功能，网格是水平渲染的。

Answer 1

您应该将Card组件包装在每个Grid项目组件中，而不是将卡片包装在网格项目中。

const CardComponent extends React.Component {
const { card } = this.props;
render() {
return (
<Card
className="cards"
id={card.id}
header={card.header}
title={card.title}
category={card.category}
summary={card.summary}
/>
);
};
};
class CardList extends React.Component {
render() {
return (
<Grid container spacing={4}>
{
CardSeed.cards.map((card, i) => (
<Grid key={'card-' + card.id} item xs={1}>
<CardComponent card={card} />
</Grid>
))
}
</Grid>
);
}
}
export default CardList;

您不需要传递direction="row"道具，因为它是Grid组件的默认道具。

请看一下导游。https://mui.com/api/grid/