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方便的chunk方法执行此操作。

一旦你把你的文章分块，就可以在你的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;
  }, []);
}

Answer 2

就个人而言，我将渲染提取到专用方法。

<div className="row">
  <section className="section--6-or-4-items section-featured campaign-teasers">
    { this.renderArticles() }
  </section>
</div>

此处的渲染方法......

renderArticles() {
    return createChunks(articles, 4).map((chunk, idx) => (
      <div key={idx}>
        { chunk.map((props, idx) => <Teaser key={idx} {...props} />) }
      </div>
    ));
  },

最后，将数组块化为N大小的小数组

const createChunks = (array, size) => {
  const copy = array.concat();
  const chunks = [];

  while (copy.length) {
    chunks.push( copy.splice(0, size) );
  }

  return chunks;
}

Reactjs有<div>包装每个第4个元素的元素

2 个答案: