ReactJS中基于条件在map循环渲染表格行与单元格的问题

我希望从API数据生成4列结构，因此实现了以下逻辑但无法正常运行。需求是：通过map循环遍历每个数据项渲染一个表格单元格，每4个数据项后生成新的表格行。请协助实现并管理动态表格元素。

原代码 #

calcs.map(
  calc =>  {
    if(calc.order % 4 == 0)
    {
      if(calc.order != 1)
      {
        </tr>
      }
      <tr>
    }
      
      <td key={calc.order}>
      <button className='btn btn-warning' onClick={() => calcClicked(calc.sign)} 
                name={calc.order} key={calc.order}>{calc.sign}</button>
      </td>
    }
)

问题原因 #

你这段代码的核心问题是JSX不允许返回不完整的标签片段。React要求每个渲染的元素必须是闭合完整的DOM结构，你在map里单独输出</tr>或者<tr>的做法会导致DOM结构非法，直接触发渲染报错。

解决方案 #

方案1：先分组再渲染（表格结构）

先把API返回的calcs数组按每4个元素分成一组，再遍历每组生成表格行，每组内的元素生成单元格：

// 先对数据进行分组处理
const chunkedCalcs = [];
for (let i = 0; i < calcs.length; i += 4) {
  chunkedCalcs.push(calcs.slice(i, i + 4));
}

// 渲染表格
return (
  <table>
    {chunkedCalcs.map((rowData, rowIndex) => (
      <tr key={rowIndex}>
        {rowData.map(calc => (
          <td key={calc.order}>
            <button 
              className='btn btn-warning' 
              onClick={() => calcClicked(calc.sign)} 
              name={calc.order}
            >
              {calc.sign}
            </button>
          </td>
        ))}
      </tr>
    ))}
  </table>
);

方案2：用CSS Grid替代表格（更简洁）

如果不需要严格的表格语义，直接用CSS Grid布局可以省去分组逻辑，自动实现4列排列：

return (
  <div style={{ 
    display: 'grid', 
    gridTemplateColumns: 'repeat(4, 1fr)', 
    gap: '10px', // 可选：设置元素间距
    padding: '10px'
  }}>
    {calcs.map(calc => (
      <button 
        key={calc.order}
        className='btn btn-warning' 
        onClick={() => calcClicked(calc.sign)} 
        name={calc.order}
      >
        {calc.sign}
      </button>
    ))}
  </div>
);

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