React.js - Xの項目の後に別の行divを追加します。

Question

私はReact.jsを学習しています。

<div className="container"> 
    <div className="row"> 
    <div id="item1"></div> 
    <div id="item2"></div> 
    <div id="item3"></div> 
    <div id="item4"></div> 
    <div id="item5"></div> 
    <div id="item6"></div> 
    </div> 
</div> 

しかし、私はこのような行あたりわずか3項目を持つようにしたい：レンダリング後、私は6つのアイテムを持っていると仮定すると

const articles = Object 
     .keys(this.state.articles) 
     .map(key => <ArticleThumb key={key} details={this.state.articles[key]} />) 
; 

return (
    <div className="container"> 
     <div className="row"> 
     { articles } 
     </div> 
    </div> 
) 

が、ここのコードです：

私はこのコードを持って

<div className="container"> 
    <div className="row"> 
    <div id="item1"></div> 
    <div id="item2"></div> 
    <div id="item3"></div> 
    </div> 
    <div className="row"> 
    <div id="item4"></div> 
    <div id="item5"></div> 
    <div id="item6"></div> 
    </div> 
</div> 

これを行うにはどのような方法が最適ですか？

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.row { 
    width: 33%; 
    box-sizing: border-box; 
} 

Answer 1

簡単な答えは、あなたがNPMを使用していない場合は、しかし、lodashのチャンク機能https://lodash.com/docs/4.17.4#chunk

のようなものを使用することで、または実行します。あなたはCSSでそれを行うことができていたマークアップで

Answer 2

追加の依存関係を追加したくない場合は、必要なグルーピングを実行するために古い旧式のjavascript forループを使用する必要があります。

Answer 3

IはArticleGrid成分からなる：私はlodashのチャンクおよび値関数（TY Deadron）を使用し、それを行うの

class ArticleRow extends Component { 

    render() { 
    let articles = Object 
     .keys(this.props.articles) 
     .map(key => <ArticleThumb key={key} details={this.props.articles[key]} />) 
    ; 

    return (
     <div className="row"> 
     {articles} 
     </div> 
    ); 
    } 
} 

export default ArticleRow; 

：

let articles = _.values(this.state.articles); 
let articlesRows = _.chunk(articles, 3); 
return (<ArticleGrid rows={articlesRows} />); 

を

class ArticleGrid extends Component { 

    render() { 
    let articlesRows = Object 
     .keys(this.props.rows) 
     .map(key => <ArticleRow key={key} articles={this.props.rows[key]} />) 
    ; 

    return (
     <div id="articles" className="container"> 
     {articlesRows} 
     </div> 
    ); 
    } 
} 

export default ArticleGrid; 

ArticleRow成分