React中如何正确嵌套循环与条件，实现结构化数据渲染

报错原因 #

你遇到的语法报错是因为JSX要求单个表达式只能返回一个根节点：你在map的隐式返回里直接写了<h2>和第二个map两个同级节点，没有统一的父容器包裹，解析器无法识别这种写法，才会抛出预期逗号的错误。

解决方案 #

首先需要用React提供的Fragment（简写为<></>）包裹每个外层map返回的多个同级节点，不会额外生成DOM元素，和你在Vue/Svelte里的无包裹模板效果一致。
然后按你的业务逻辑写嵌套判断即可，完整实现代码如下：

{data.map((row, index) => (
  // Fragment包裹多个同级元素，不会生成额外DOM
  <React.Fragment key={index}>
    <h2>{row.header}</h2>
    {row.copy.map((copyRow, copyIndex) => {
      // 字符串类型渲染p标签
      if (typeof copyRow === 'string') {
        return <p key={copyIndex}>{copyRow}</p>
      }
      // ul类型渲染列表
      if (copyRow.tag === 'ul') {
        return (
          <ul key={copyIndex}>
            {copyRow.content.map((item, itemIndex) => (
              <li key={itemIndex}>{item}</li>
            ))}
          </ul>
        )
      }
      // 兜底错误提示
      return <p key={copyIndex}>OH NO ERROR</p>
    })}
  </React.Fragment>
))}

如果你的项目支持JSX新语法，也可以用<>代替<React.Fragment>，写法更简洁：

{data.map((row, index) => (
  <>
    <h2 key={index}>{row.header}</h2>
    {/* 其余逻辑和上面实现完全一致 */}
  </>
))}

补充说明 #

• 代码里的key是React列表渲染要求的唯一标识，如果你数据里有唯一业务id字段可以替换掉index，渲染性能更好
• 内层判断逻辑和你Svelte里写的逻辑完全对齐，只是把Svelte的模板语法换成了JSX里的原生JS判断写法

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