使用React创建网格布局

Posted 2021-05-06

我有一个对象数组，我想在6行和3个Cols Grid中显示它们。我使用以下代码。

 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个不同的行中。

我有一种感觉，我可能已经过度复杂，并且必须有更好的方法来完成同样的事情，所以将不胜感激任何帮助！

答案

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

至于网格布局;你可能会发现CSS Grid useful。

请参阅下面的实际示例。

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