React创建含拆分行的表格时出现<tr>嵌套警告的解决求助

问题原因 #

控制台警告validateDOMNesting(...): <tr> cannot appear as a child of <tr>是因为DOM规范不允许作为另一个的子元素，你的代码中Grandson组件的主<tr>直接嵌套了SpiltRow返回的<tr>，违反了DOM结构规则。

解决方案 #

通过rowspan实现跨行布局，将所有<tr>作为<tbody>的直接子元素，同时保持原有视觉效果，具体修改如下：

1. 修改SpiltRow组件 #

让它返回<td>而非<tr>，作为表格单元格使用：

import React from "react"
function SpiltRow({location}){
   return <td>{location.item}</td>
}
export default SpiltRow

2. 重构Grandson组件 #

移除嵌套的<tr>，使用rowspan让用户信息单元格跨所有location行，同时保证每行的单元格数量与表头一致：

import SpiltRow from "./SpiltRow";
function Grandson({nam })
{
  const locationCount = nam.locations.length;
  return (
    <>
      {/* 第一行：显示用户基础信息和第一个location */}
      <tr>
        <td rowSpan={locationCount}>{nam.Name}</td>
        <td rowSpan={locationCount}>{nam.age}</td> 
        <SpiltRow location={nam.locations[0]} />
        <td rowSpan={locationCount}>{(nam.adult).toString()}</td> 
      </tr>
      {/* 后续行：只显示剩余location，其他单元格留空 */}
      {nam.locations.slice(1).map((location,index)=>{
        return (
          <tr key={index}>
            <td></td>
            <td></td>
            <SpiltRow location={location} />
            <td></td>
          </tr>
        )
      })}
    </>
  )
}
export default Grandson

3. 优化Child组件 #

将所有用户行合并到同一个表格中，修正表头结构和key值，同时修正新用户的初始数据结构：

import Grandson from "./Grandson";
import {useState} from "react"

function Child({names ,addusers})
{
    // 修正locations的初始结构，与现有数据保持一致
    const [newUser, setNewUser] = useState({Name:"",age:"",adult:false,locations:[{item:""},{item:""}]})
    return <div> 
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>location</th>
            <th>adult</th>
          </tr>
        </thead>
        <tbody>
          {names.map((nam,i)=>{
            // 使用数字作为key，避免对象key导致的性能问题
            return <Grandson nam={nam} key={i}/>
          })}
        </tbody>
      </table>

      first name : <input type ="text" name="Name" onChange={e =>setNewUser({... newUser,[e.target.name]:e.target.value})}/>
      city :       <input type ="text" name="age" onChange={e =>setNewUser({... newUser,[ e.target.name]:e.target.value})}/>
      adult : <input type ="checkbox"  name="adult" onChange={e =>setNewUser({... newUser,[ e.target.name]:e.target.checked})}/>
      <button onClick={()=>addusers(newUser)}> add</button>
    </div>
}
export default Child

修改后，DOM结构符合规范，控制台警告会消失，同时表格的视觉效果与原有需求一致。

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