React.js使用Fragments动态渲染表格无报错却不显示的问题

• 第一处核心代码Bug：遍历取值引用错误
  动态生成行的map逻辑中，遍历回调声明了当前项参数elem，但取值时错误引用了整个数组list的属性——数组对象本身不存在id、name、company字段，渲染出的单元格内容全部为undefined，自然看不到有效展示内容。
  错误代码片段：

  const paramList = list.map( elem => (
    <tr key={elem.id}>
     <td>{list.id}</td>
     <td>{list.name}</td>
     <td>{list.company}</td>
    </tr>))
  

  修正后需将所有取值的list替换为当前遍历项elem：

  const paramList = list.map( elem => (
    <tr key={elem.id}>
     <td>{elem.id}</td>
     <td>{elem.name}</td>
     <td>{elem.company}</td>
    </tr>))
  

• 第二处DOM结构合规性校验：表格标签嵌套规则
  浏览器对HTML表格的嵌套有严格的解析规则：<table>标签下的合法直接子节点为<thead>、<tbody>、<tfoot>，直接在table下放置裸<tr>会触发浏览器的容错解析，打乱DOM结构导致渲染异常。
  你用React.Fragment包裹动态生成的tr是完全正确的用法——Fragment不会生成额外的占位DOM，不会破坏表格的嵌套层级；只需要把原有表头的行放入<thead>标签，把FragChild渲染的动态行统一放入<tbody>标签即可，修正后的FragmentDemo.js结构参考：

  function FragmentDemo() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>Name</th>
              <th>Company</th>
            </tr>
          </thead>
          <tbody>
            <FragChild />
          </tbody>
        </table>
      </div>
    )
  }
  

• 第三处路径一致性校验
  检查所有组件的导入路径是否和实际文件存放位置匹配：
  • App.js中导入FragmentDemo的路径为./components/Fragments/FragmentDemo
  • FragmentDemo.js中导入FragChild的路径为./FragChild
    如果路径存在偏差，组件会返回undefined，导致子组件内容无法渲染。无报错场景下可优先排除该问题。

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