React实现TodoList时map渲染表格项挤在同一行的解决方案求助

所有待办条目挤在同一行的核心原因是<tr>行标签被写在了map遍历逻辑的外层，整个待办列表最终只生成了1个表格行，map每次循环只会往这唯一的行内追加<th>/<td>单元格，所有内容自然会堆在同一行。
之前尝试用div包裹条目触发validateDOMNesting报错，是因为HTML表格语法有严格的嵌套规则：<tbody>的直接子元素只能是<tr>，<tr>的直接子元素只能是<th>或<td>，div属于非法嵌套节点，React才会抛出校验警告。

将<tr>标签移动到map遍历的回调内部，保证每个待办条目对应独立的表格行即可。此时map每次返回的根节点就是合法的<tr>元素，原本用来包裹条目的React.Fragment可以直接删掉，不会产生多余节点。
替换Form.js中<tbody>部分的代码为如下内容即可实现逐行渲染：

<tbody>
  {list.map((item) => {
    return (
      <tr className="fw-normal" key={item.id}>
        <th>
          <span className="ms-2" data-name={item.title}>
            {item.title}
          </span>
        </th>
        <td className="align-middle priority-class">
          <span className={`badge ${item.priority === 'High' ? 'bg-danger' : item.priority === 'Normal' ? 'bg-warning' : 'bg-success'}`}>
            {item.priority}
          </span>
        </td>
        <td className="align-middle">
          <h6 className="mb-0" data-id={item.id}>
            <a className="remove-link" href="#">
              <span className="badge bg-gradient remove">
                ❌
              </span>
            </a>
            <a className="complete-link" href="#">
              <span className="badge bg-gradient complete">
                ✔
              </span>
            </a>
          </h6>
        </td>
      </tr>
    )
  })}
</tbody>

• 原代码遍历列表时用数组索引作为key，替换为每个待办项自带的唯一id，避免后续增删列表时出现渲染状态错乱
• 原代码中优先级徽章类名、data-id属性错误写在普通引号内，模板字符串不生效，修正为JSX合法的动态属性绑定，同时补充了不同优先级对应的徽章颜色逻辑，和原生版本视觉效果对齐
• 移除了多余的React.Fragment包裹，减少无效DOM层级

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