使用 React 创建网格布局

Question

我有一个对象数组，我想在 6 行 3 列网格中显示它们。我正在使用以下代码。

 const GridLayout = (props) => {
        let layout = [];
        let total_articles = props.articles.length;
        let nRows = total_articles / 3;
        let nCols = 3;

        for (let i = 0; i < nRows; i++) {
            layout.push(<div className="row">);
            for (let j = 0; j < nCols && (i * nCols) + j < total_articles; j++) {
                    layout.push(
                    <div key={(i * nCols) + j} className="col-md-4 column">
                        <ArticleCard articleDetails={props.articles[(i * nCols) + j]}/>
                    </div>)
            }
                layout.push(</div>);
        }
        return (
            <div id={"mainContent"} className="container">
                {layout}
            </div>
        )
    };

第一个和最后一个layout.push() 引起了问题并给我一个语法错误。如果我删除它们，它会起作用，但只是将所有文章添加到一行中，而我希望将其添加到 6 个不同的行中。

我有一种感觉，我可能把这件事弄得太复杂了，一定有更好的方法来完成同样的事情，所以将不胜感激任何帮助！

Answer 1

Array.prototype.map()通常用于render()React 中的列表。

至于布局的网格化；你可能会发现有用。CSS Grid

请参阅下面的实际示例。

const GridLayout = (props) => (
   <div id="mainContent" className="container" style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridGap: '10px', gridAutoRows: 'minMax(100px, auto)'}}>
     {this.props.articles.map((article) => (
       <div>
         <ArticleCard articleDetails={article}/>
       </div>
     ))}
   </div>
)