javascript - 在 React 应用程序中渲染 DIV

Question

嗨。任务:

我从服务器获取了一个包含帖子的数组。并返回它:

{ this.state.articles.map((article) => {
return ( <div className={css(styles.feed_row)}>
  <div key={article.id} className={ css(boxes.art_box) }>
    <span className={css(boxes.cover)}>
      <img  src={article.art_cover} alt="" width={350}/>
    </span>
  </div>
</div> )
}

在出去的时候，我会得到一个包含很多帖子的 div。

但是如何限制每个.feed_row，只有两个元素，或者达到最大宽度后，自动创建一个新的.feed_row并且继续向其中添加帖子吗？

我正在尝试得到这样的东西:

Answer 1

以下是如何将一维数组转换为所需的二维数组:

function articleRows(articles, max, maxWidth) {
  var rows = [];
  var currentRow = [];
  const fits = a => currentRow.reduce((acc, curr) => acc + curr.width, 0) + a.width <= maxWidth;
  articles.forEach(a => {
    if (currentRow.length < max && fits(a)) return currentRow.push(a);
    rows.push(currentRow);
    currentRow = [a];
  });
  rows.push(currentRow);
  return rows;
}

var articles = [];
for (var i = 0; i < 10; i++) {
  articles.push({
    width: Math.ceil(Math.random() * Math.random() * 4) * 150 + 150
  });
}

var rows = articleRows(articles, 2, 750);

console.log(articles.map(a => a.width));
console.log(rows.map(row => row.map(a => a.width).join(", ")));

基本思想是创建一个空行数组，将其推送到合适的长度，然后移动到下一行。

这是一个展示最终结果的 React 沙箱:https://codesandbox.io/s/pmopkvwkq7