Reactjs在每第4个元素上都有<div>包装器

Question

在具有类行的div中反应第4组项目。目前，您可以在下面看到我<div>的文章组。

// articles is array of article object
<div className="row">
    <section className="section--6-or-4-items section-featured campaign-teasers">
        {articles.map(item => <Teaser {...item} key={item.id} />)}
    </section>
</div>

我是否应该创建一个具有<div>包装器的新组件，一次只能接受4个数组来呈现文章。

Answer 1

最好的选择是将文章数组构建为4个长度的数组。您可以使用lodash的方便的块方法进行此操作。

对文章进行分块后，可以在JSX中对其进行迭代，如下所示：

const sections = chunk(articles, 4);

return (
  <div className="row">
    {sections.map((articles, i) => (
      <section className="..." key={i}>
        {articles.map(item => <Teaser {...item} key={item.id} />)}
      </section>
    )}
  </div>
);

编辑：如果您不想使用lodash，则可以使用reduce，效果很好：

function chunk(array, size) {
  return array.reduce((chunks, item, i) => {
    if (i % size === 0) {
      chunks.push([item]);
    } else {  
      chunks[chunks.length - 1].push(item);
    }
    return chunks;
  }, []);
}