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()은 일반적으로 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> 
)