Javascript React.js-关闭并在X项之后添加另一行div

我正在学习React.js

我有以下代码：

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

const articles=Object
.keys（此.state.articles）
.map（键=>）
;
返回(
{条款}
)

假设我有6项，下面是渲染后的代码：

<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个项目，如下所示：

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

---

最好的方法是什么？

使用您现有的标记，您可以通过css实现：

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

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

---

简单的答案是使用lodash的块函数

---

但是，如果您不使用npm，或者不想添加其他依赖项，则必须使用老式的javascript for循环来执行所需的分组。

我制作了一个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;

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;

类ArticleGrid扩展组件{
render（）{
让articlesRows=对象
.keys（此.props.rows）
.map（键=>）
;
返回(
{articlesRows}
);
}
}
导出默认网格；

ArticleRow组件：

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;

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;

类ArticleRow扩展组件{
render（）{
让项目=对象
.keys（此.props.articles）
.map（键=>）
;
返回(
{条款}
);
}
}
导出默认项目行；

我使用了lodash的chunk and values函数（ty Deadron），完成了：

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

let articles=\值（this.state.articles）；
让articlesRows=u0.chunk（articles，3）；
返回（）；