连续显示 React 组件答案

【问题标题】：Display React components in a row连续显示 React 组件
【发布时间】：2021-10-03 04:03:35
【问题描述】：

我是 React 新手，我正在尝试连续显示一系列详细信息。我正在使用 MaterialUI。我有一个单独的组件 (MovieListItem) 显示详细信息。该组件正在由另一个组件 (MoviesList) 呈现。

我希望 MovieListItem 中的详细信息显示在一行中。在此代码中，它们出现在不同的行中。可能是因为数组中的每个项目都返回了子组件。

电影列表：

const MoviesList = (props) => (
    <div>
        <div>
            <h1>Movies</h1>
        </div>
        {
            props.details.map((detail) => {
                return <MovieListItem key={detail.id} {...detail} />
            })
        }
    </div>
)

MovieListItem：

const MovieListItem = (props) => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={2}>
                    <Paper className={classes.paper}>
                        <h4><b>Title: {props.title}</b></h4>
                        <p>Description : {props.description}</p>
                    </Paper>
                </Grid>
            </Grid>
        </div>
    )
}

【问题讨论】：

将display: inline-block; 添加到您的classes.root

标签： reactjs material-ui frontend

【解决方案1】：

import Box from '@material-ui/core/Box';
const MoviesList = (props) => (
    <div>
        <div>
            <h1>Movies</h1>
        </div>
        <Box display="flex">
        {
            props.details.map((detail) => {
                return <MovieListItem key={detail.id} {...detail} />
            })
        }
        </Box>
    </div>
)

只需将列表项包装在 Box 组件中，并显示为 flex，默认情况下它将连续显示项目。如果您想在内容无法容纳在一行中时自动包装内容，您还可以添加 flexWrap 属性

【讨论】：

这在一定程度上起作用。每个 Paper 元素之间的距离变得不稳定。

【解决方案2】：

尝试将这些 css 值添加到您提供给 MovieListItem (classes.root) 的类中：

.movies-list-item {
    display:flex;
    flex-direction:row;
    justify-content: flex-start; //you can change it depends on what you exactly need
}

【讨论】：