react遍历数组，如何每行生成3个组件？

Question

要生成这样的html:
<div class="container">
    <div class="row">
        <a href="/post/1">标题1</a>
        <a href="/post/2">标题2</a>
        <a href="/post/3">标题3</a>
    </div>
    <div class="row">
        <a href="/post/4">标题4</a>
        <a href="/post/5">标题5</a>
        <a href="/post/6">标题6</a>
    </div>
</div>

Item组件：
<Link to={`/post/${props.item.id}`}> {props.item.title} </Link>

6条数据如下：
data = [
    {id:1, title:'标题1'},
    {id:2, title:'标题2'},
    {id:3, title:'标题3'},
    {id:4, title:'标题4'},
    {id:5, title:'标题5'},
    {id:6, title:'标题6'}
];

React遍历生成组件：
data.map((item, index) => {
    return (
        <Fragment>
            //问题1：开始标签，判断后插入 <div className="row"> 报错，非闭合标签
            <Item key={item.id} item={item} />
            //问题2：结束标签，判断后插入 </div> 报错，非闭合标签
        </Fragment>
    )
})

问题：
怎样才能遍历一整个数组，每三个元素成为一行显示呢？

Answer 1

首先将一维数组，根据要求转换为二维数组，再进行遍历。

const data = [
    { id: 1, title: '标题1' },
    { id: 2, title: '标题2' },
    { id: 3, title: '标题3' },
    { id: 4, title: '标题4' },
    { id: 5, title: '标题5' },
    { id: 6, title: '标题6' },
  ];
  const newData = chunk(data, 3); // lodash

  return (
    <div className="container">
      {newData.map((item, index) => {
        return (
          <div key={index} className="row">
            {item.map((subItem) => {
              return (
                <Link key={subItem.id} to={`/post/${subItem.id}`}>
                  {subItem.title}
                </Link>
              );
            })}
          </div>
        );
      })}
    </div>
  );