React动态表格中如何让操作按钮始终处于Admin列下方

问题核心是表头（thead）和表体（tbody）的列数不匹配：当第一个开球时间（teeTime）是4个席位时，表头会显示Player4列，但如果某行只有3个玩家，tbody里只生成3个玩家单元格，紧接着就放Admin按钮的单元格，这时候按钮就会挤到Player4的位置，导致错位。

要让按钮始终在Admin列下方，只需保证每一行的列数和表头完全一致，具体修改如下：

1. 先提前定义判断变量，避免重复写逻辑：

const hasFourthPlayerColumn = props.teeTimes[0]?.noOfSlots === 4;
const isAdmin = props.loggedInUser.role === 'ADMIN' && !previous;

2. 优化表头部分（逻辑不变，用变量更简洁）：

<thead>
  <tr>
    <th>Tee time</th>
    <th>Player 1</th>
    <th>Player 2</th>
    <th>Player 3</th>
    {hasFourthPlayerColumn && <th>Player 4</th>}
    {isAdmin && <th id='admin'>Admin</th>}
  </tr>
</thead>

3. 关键修改表体每行：生成完玩家单元格后，若表格需要显示Player4列但当前行玩家不足4人，补充一个空占位单元格，再放置Admin按钮：

<tbody>
{props.teeTimes.map((teetime) => (
  <tr key={teetime.id}>
    <td>{teetime.teeTime}</td>
    {teetime.entrants.map((entrant) => (
      <td key={entrant.member.id}>
        {entrant.member['firstName']} {entrant.member['surname']} ({entrant.member['handicap']})
        <br />
        <button 
          className='btn btn-warning' onClick={() => removeTeeSheetEntrant(teetime.id, entrant.member.id)}>
          Remove
        </button>
      </td>
    ))}
    {/* 补充Player4列的空占位 */}
    {hasFourthPlayerColumn && teetime.entrants.length < 4 && (
      <td></td>
    )}
    {/* Admin按钮单元格 */}
    {isAdmin && (
      <td headers='admin'>
        <ButtonWithProgress className="btn btn-danger m-2" onClick={() => deleteTeeSheet(teetime.id)} text='Delete'/>
        <button className="btn btn-warning m-2" disabled={true} onClick={() => handleShowEditTeeTime(teetime.id)}>Update</button>
      </td>
    )}
  </tr>
))}   
</tbody>

修改后，不管每行有3个还是4个玩家，只要表头包含Player4列，表体行都会补全对应列数，Admin按钮就能始终对齐到表头的Admin列下方。

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