React JSX中条件添加表格新行及JSX父元素错误解决

先解决JSX语法错误 #

你碰到的「JSX expressions must have one parent element」错误，核心原因是在charts.map循环里直接写了</tr><tr>——JSX不允许拆分标签，必须输出完整的DOM元素，这种写法会破坏结构合法性，React无法解析。

修复思路： #

取消在循环中拆分<tr>的操作，要么把数据按freq分组后渲染完整行，要么直接在<tbody>里输出完整的行元素。

再实现添加内容34的需求 #

要在周一列的06下方添加34，只需在现有数据行下方新增一行，对应周一列的位置用colSpan="3"匹配表头的列跨度（因为表头中MON是跨3列的），保证表格结构对齐。

完整可运行代码： #

<div>
  <TableWrapper className="table-data-view table-responsive">
    <ChartViewWrapper>
      <table align="center" className="record">
        <thead>
          {!charts[0] || charts[0].freq === 6 ? (
            <tr key="1">
              <td>Date</td>
              <td colSpan="3">MON</td>
              <td colSpan="3">TUE</td>
              <td colSpan="3">WED</td>
              <td colSpan="3">THU</td>
              <td colSpan="3">FRI</td>
              <td colSpan="3">SAT</td>
            </tr>
          ) : null}

          {!charts[0] || charts[0].freq === 7 ? (
            <tr key="2">
              <td>Date</td>
              <td colSpan="3">MON</td>
              <td colSpan="3">TUE</td>
              <td colSpan="3">WED</td>
              <td colSpan="3">THU</td>
              <td colSpan="3">FRI</td>
              <td colSpan="3">SAT</td>
              <td colSpan="3">SUN</td>
            </tr>
          ) : null}

          {!charts[0] || charts[0].freq === 5 ? (
            <tr key="3">
              <td>Date</td>
              <td colSpan="3">MON</td>
              <td colSpan="3">TUE</td>
              <td colSpan="3">WED</td>
              <td colSpan="3">THU</td>
              <td colSpan="3">FRI</td>
            </tr>
          ) : null}
        </thead>
        <tbody>
          {/* 原始数据行 */}
          <tr>
            <td>
              29/12/14
              <br /> to
              <br /> 01/01/15
            </td>
            {charts.map((chart, index) => (
              <>
                <td className="verticaltext">{chart.open}</td>
                <th>{chart.jodi}</th>
                <td className="verticaltext">{chart.close}</td>
              </>
            ))}
          </tr>

          {/* 新增行：周一列下方显示34 */}
          <tr>
            <td></td> {/* 对应日期列的空单元格 */}
            <td colSpan="3">34</td> {/* 匹配MON列的3列跨度 */}
            {/* 自动生成其他列的空单元格，保证表格对齐 */}
            {charts[0]?.freq && Array.from({ length: charts[0].freq - 1 }).map((_, idx) => (
              <td colSpan="3" key={idx}></td>
            ))}
          </tr>
        </tbody>
      </table>
    </ChartViewWrapper>
  </TableWrapper>
</div>

额外扩展：如果需要按freq拆分多行数据 #

要是你原本的逻辑是想按freq把charts分成多行显示，可以先对数据分组再渲染：

// 先对charts数组按freq分组
const groupedCharts = [];
if (charts.length && charts[0].freq) {
  const freq = charts[0].freq;
  for (let i = 0; i < charts.length; i += freq) {
    groupedCharts.push(charts.slice(i, i + freq));
  }
}

// 在tbody中渲染分组后的行
<tbody>
  {/* 日期行 */}
  <tr>
    <td>
      29/12/14
      <br /> to
      <br /> 01/01/15
    </td>
  </tr>
  {/* 分组后的业务数据行 */}
  {groupedCharts.map((group, rowIdx) => (
    <tr key={rowIdx}>
      {rowIdx !== 0 && <td></td>} {/* 仅第一行对应日期列，后续行空出该位置 */}
      {group.map((chart, idx) => (
        <>
          <td className="verticaltext">{chart.open}</td>
          <th>{chart.jodi}</th>
          <td className="verticaltext">{chart.close}</td>
        </>
      ))}
    </tr>
  ))}
  {/* 显示34的行 */}
  <tr>
    <td></td>
    <td colSpan="3">34</td>
    {charts[0]?.freq && Array.from({ length: charts[0].freq - 1 }).map((_, idx) => (
      <td colSpan="3" key={idx}></td>
    ))}
  </tr>
</tbody>

以上方案既修复了JSX语法错误，又实现了添加内容的需求，完全不需要使用React默认的dataSource/columns式表格结构。

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