React组件条件插入包装标签报错，如何实现组件两两分组包裹？

错误原因分析 #

你遇到的Unexpected token, expected ","错误，以及无法实现预期结构的问题，根源有三点：

1. JSX语法规则限制：React不允许拆分渲染JSX的开闭标签（比如单独渲染<div>再单独渲染</div>），JSX必须是完整的元素结构。
2. map返回值格式错误：在map的回调函数中，用()包裹返回内容时，内部的条件表达式不需要额外嵌套{}，这种冗余的大括号会触发语法错误。
3. 逻辑偏差：原写法试图通过索引判断插入开闭标签，无法实现每两个组件包裹在一个div里的效果，反而会生成不合法的DOM结构。

正确解决方案 #

要实现每两个AnotherComponent包裹在一个my-class容器里的结构，正确思路是先将数据源按每2个元素分组，再遍历分组后的数组渲染对应结构。

代码实现 #

import AnotherComponent from './Anothercomponent.jsx'

export default function CurrentComponent({ datas, onChangeValue }) {
  // 将datas拆分为每2个元素一组
  const groupedDatas = datas.reduce((acc, curr, index) => {
    // 偶数索引时新建分组
    if (index % 2 === 0) {
      acc.push([curr]);
    } else {
      // 奇数索引时将元素加入最后一个分组
      acc[acc.length - 1].push(curr);
    }
    return acc;
  }, []);

  return (
    <section>
      {groupedDatas.map((group, groupIndex) => (
        <div key={groupIndex} className='my-class'>
          {group.map((data, itemIndex) => (
            // 传递必要props并添加唯一key
            <AnotherComponent 
              key={itemIndex} 
              data={data} 
              onChangeValue={onChangeValue} 
            />
          ))}
        </div>
      ))}
    </section>
  );
}

代码说明 #

1. 分组逻辑：使用reduce遍历原数组，偶数索引时创建新分组，奇数索引的元素加入上一个分组，最终得到二维数组，每个子数组包含2个元素（最后一组若不足2个可根据需求调整）。
2. 列表渲染：外层遍历分组数组渲染my-class容器，内层遍历每个分组渲染对应的AnotherComponent，同时为每个列表项添加唯一key，符合React性能优化要求。
3. 合法JSX结构：每个容器和内部组件都是完整的JSX元素，完全符合语法规则，不会触发错误。

替代分组函数（可选） #

如果觉得reduce写法不够直观，也可以用普通循环实现分组：

const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};

// 在组件中使用：
const groupedDatas = chunkArray(datas, 2);

内容的提问来源于stack exchange，提问作者Robert