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