React中HTML表格渲染报错：<tr>不能作为<div>子元素求助

首先，咱们来看你遇到的报错：<tr> cannot appear as a child of <div>，根源出在内层循环的写法错误，导致<tr>没有被正确包裹在<tbody>里，反而跑到了<table>外面，直接成为了外层<div>的子元素，这违反了HTML的嵌套规则。

咱们拆解一下你代码里的问题：

• 内层的item.contents.forEach(...)不会返回任何内容，而且你直接把<tr>push到了外层的result数组里——这就导致这些<tr>和<table>是同级的，没有被包含在<tbody>内部，自然会触发报错。
• 另外，<thead>的写法也不符合规范，它里面必须包含<tr>和<th>，不能直接放文本。

接下来是修复后的完整代码：

getTableContent = (arr) => {
  let result = [];
  arr.forEach(function (item, i) {
    result.push(
      <table key={item.productType}>
        {/* 修正thead的结构：添加tr和th */}
        <thead>
          <tr>
            <th>{item.productType}</th>
            <th>数量</th>
          </tr>
        </thead>
        <tbody>
          {/* 把forEach换成map，返回tr数组作为tbody的子元素 */}
          {item.contents.map(function (nextItem, j) {
            return (
              <tr key={nextItem.type + j}> {/* 注意：如果type重复，key要加索引保证唯一 */}
                <td>{nextItem.type}</td>
                <td>{nextItem.count}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    );
  });
  return result;
};

render() {
  return (
    <div>{this.getTableContent(productSpecification)}</div>
  );
}

关键改动说明： #

• 替换内层forEach为map：map会返回一个由<tr>组成的数组，直接作为<tbody>的子元素，这样<tr>就被正确包裹在表格结构里了，不会跑到外层div中。
• 修正thead结构：给<thead>添加了<tr>和<th>，符合HTML表格的规范。
• 优化key值：如果你的nextItem.type可能重复，建议加上索引j来保证key的唯一性，避免React的key警告。

这样修改后，页面就能正常渲染表格，而且不会再出现那个报错啦～

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