React条件渲染Row开闭标签报错 如何按每3项分组包裹Col组件

你之前的代码报错核心原因是JSX不支持单独渲染未闭合的零散标签：

• JSX本质是React.createElement的语法糖，编译阶段会被转换为标准JS函数调用，要求所有标签必须是完整、闭合的结构
• 你尝试条件输出单独的<Row>开标签或</Row>闭标签，相当于写了半个无法被解析的函数参数，自然会触发Unexpected token语法错误
• 后续的三元写法逻辑也有问题：两个分支分别只写了Row的一半，开标签和闭标签不在同一个JSX节点树内，解析器依然会识别为未闭合标签。

不要在单次遍历里拆分Row标签，先把原数组按每3个元素为一组做切片，再分层渲染：外层遍历分组渲染完整的<Row>，内层遍历每组内的元素渲染<Col>，完全符合JSX语法要求，可读性也更高。

{
  // 按每3个元素一组生成二维分组数组
  Array.from(
    { length: Math.ceil(companyConfiguration.length / 3) },
    (_, groupIdx) => {
      // 截取当前分组对应的元素
      const currentGroup = companyConfiguration.slice(
        groupIdx * 3,
        groupIdx * 3 + 3
      )
      return (
        <Row key={groupIdx}>
          {currentGroup.map((item, colIdx) => {
            const itemIndex = groupIdx * 3 + colIdx
            return (
              <Col key={itemIndex}>
                <FormComponent
                  field={item}
                  onChange={handleChange}
                  currentItem={{}}
                />
              </Col>
            )
          })}
        </Row>
      )
    }
  )
}

这个写法会自动处理元素总数不是3的倍数的场景：最后一组不足3个元素时，也会被正确包裹在Row组件内，不会出现标签不闭合的问题。

注意：不要用拼接HTML字符串的思路写JSX，所有JSX节点必须是完整自洽的结构，零散的开/闭标签永远无法通过语法校验。

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