Reactjs 如何在表中水平呈现数据（react）？

我是初级开发人员，当我想在表中水平呈现数据时，我面临一个问题（react）。 在控制台中没有嵌套错误的情况下，是否可以使用

而不是

以列而不是行的形式呈现数据？我提出的唯一解决方案是映射每一行（非常糟糕的解决方案）

这是我想做的表格：

图片：

我的代码示例：

  return (
    <table>
      <tr>
        <th></th>
        {meals.map((meal) => (
          <td>DAY {meal.id}</td>
        ))}
      </tr>
      <tr>
        <th>6:00AM</th>
        {meals.map((meal) => (
          <td>{meal.sixAM}</td>
        ))}
      </tr>
      <tr>
        <th>9:00AM</th>
        {meals.map((meal) => (
          <td>{meal.nineAM}</td>
        ))}
      </tr>
      <tr>
        <th>12:00AM</th>
        {meals.map((meal) => (
          <td>{meal.twelveAM}</td>
        ))}
      </tr>
      <tr>
        <th>3:00PM</th>
        {meals.map((meal) => (
          <td>{meal.threePM}</td>
        ))}
      </tr>
      <tr>
        <th>6:00PM</th>
        {meals.map((meal) => (
          <td>{meal.sixPM}</td>
        ))}
      </tr>
      <tr>
        <th></th>
      </tr>
      <tr>
        <th>
          <p>Workout</p>
        </th>
      </tr>
    </table>
  );
};

renderMealTable（膳食）{
常数进餐时间={
早上六点：“早上六点”，
九点：“上午9点”，
//……所有的用餐时间都在这里
};
返回(
{Object.keys（mealTimes）.map（mealTime=>（{mealTimes[mealTime]}））}
{
膳食图（膳食=>(
{`DAY${meat.id}`}
{
meetimes.map（meetime=>(
{用餐时间}
))
}
))
}
);
}

添加了新常数：

const columnKeys = Object.keys(meals[0]).filter((f) => f !== "Carb");

因为您在结果中跳过了碳水化合物。

表格：

<table>
        <tbody>
          {rowHeaders.map((header, index) => (
            <tr key={header}>
              <th>{header}</th>
              {meals.map((meal) =>
                index > 0 ? (
                  <td key={meal.id}>{meal[columnKeys[index]]}</td>
                ) : (
                  <td key={meal.id}>DAY {meal[columnKeys[index]]}</td>
                )
              )}
            </tr>
          ))}
        </tbody>
      </table>

{rowHeaders.map（（头，索引）=>(
{header}
{膳食图（（膳食）=>
索引>0(
{MEIN[columnKeys[index]}
) : (
日{餐[列键[索引]]}
)
)}
))}

正在进行演示

结果

---

有一个关于@bigBadWolf的例子，请查看我的答案。谢谢，节省了很多时间。而且学到了新东西！不客气。请投票并将答案标记为已接受。

const columnKeys = Object.keys(meals[0]).filter((f) => f !== "Carb");

<table>
        <tbody>
          {rowHeaders.map((header, index) => (
            <tr key={header}>
              <th>{header}</th>
              {meals.map((meal) =>
                index > 0 ? (
                  <td key={meal.id}>{meal[columnKeys[index]]}</td>
                ) : (
                  <td key={meal.id}>DAY {meal[columnKeys[index]]}</td>
                )
              )}
            </tr>
          ))}
        </tbody>
      </table>