使用 React 创建网格布局答案

【问题标题】：Creating a Grid Layout using React使用 React 创建网格布局
【发布时间】：2018-05-30 19:04:28
【问题描述】：

我有一个对象数组，我想在 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 个不同的行中。

我有一种感觉，我可能把这件事弄得太复杂了，必须有更好的方法来完成同样的事情，所以非常感谢任何帮助！

【问题讨论】：

标签： css reactjs gridview bootstrap-4 react-bootstrap

【解决方案1】：

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

至于网格化你的布局；你可能会找到CSS Griduseful。

请参阅下面的实际示例。

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>
)

【讨论】：