0
개체 배열을 가지고 있고 그것들을 6 행과 3 열 그리드에 표시하고 싶습니다. 다음 코드를 사용하고 있습니다.React를 사용하여 그리드 레이아웃 생성하기
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 행을 원할 동안 한 행에있는 모든 기사를 추가합니다.
나는 이것을 복잡하게 생각할 수 있고 같은 것을 성취하는 더 좋은 방법이 있어야한다는 느낌이 들었습니다. 그래서 어떤 도움을 주셔서 감사합니다!