javascript - 如何创建每行 3 个元素的水平网格

Question

我正在渲染一堆 Player使用 map() 的组件循环，我想使用某种 Grid 水平并排显示它们来自 material-ui .

现在组件呈现如下:

我想像这样渲染它们:

到目前为止，我已经尝试过这个 Grid :

render() {
        const { multipleVideoSource } = this.state;
        return (
            multipleVideoSource !== null ?
            multipleVideoSource.map(src => (
                <div style={{ row: 'horizontal' }}>
                    <Grid container spacing={24}>
                        <Grid item xs={4}>
                            <Player key={src} height={500} fluid={false}>
                                <ControlBar autoHide={false} className="my-class" />
                                <BigPlayButton position="center" />
                                <HLSSource isVideoChild src={src} />
                            </Player>
                        </Grid>
                    </Grid>
                </div>
            ))
            : "Only one video"
        );
    };

但是没有运气。有什么解决办法吗？

提前谢谢你。

Answer 1

试试下面的代码:

render() {
    const { multipleVideoSource } = this.state;

    const BunchOfPlayer = multipleVideoSource.map(src => (                           
          <Grid item xs={4}>
            <Player key={src} height={500} fluid={false}>
               <ControlBar autoHide={false} className="my-class" />
               <BigPlayButton position="center" />
               <HLSSource isVideoChild src={src} />
            </Player>
          </Grid>));

    return (
        multipleVideoSource !== null ?
          <Grid container spacing={24}>        
             {BunchOfPlayer}        
          </Grid>
        : "Only one video"
   );
};