React.js - Ferme et ajoute une autre ligne div après X items

Question

J'apprends React.js.

J'ai ce code:

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

En supposant que j'ai 6 éléments, voici le code après avoir rendu:

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

Mais je veux avoir seulement 3 points par ligne comme celui-ci:

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

Quelle est la meilleure façon de faire cela?

Answer 1

La réponse facile est d'utiliser quelque chose comme la fonction de morceau de lodash https://lodash.com/docs/4.17.4#chunk

Toutefois, si vous ne l'utilisez NPM et ou ne Vous ne voulez pas ajouter de dépendances supplémentaires, vous devrez utiliser un bon javascript à l'ancienne pour effectuer le regroupement dont vous avez besoin.

Answer 2

Avec le balisage que vous avez, vous pouvez le faire via css:

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

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

Answer 3

I fait un composant ArticleGrid:

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; 

Un composant ArticleRow:

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; 

je bloc de lodash et les valeurs de la fonction (ty Deadron) et il est fait:

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