使用React创建网格布局
使用React创建网格布局
提问于 2017-12-17 09:32:24
我有一个对象数组，我想将它们显示在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个不同的行。
我有一种感觉，我可能有更复杂的这件事，肯定有更好的方法来完成同样的事情，所以感谢任何帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-17 10:00:56
Array.prototype.map()通常用于render() React中的列表。
至于布局的网格化，你可能会发现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>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47851502
复制相关文章
相似问题
腾讯云开发者
