React报错：Text nodes无法作为<tbody>子节点，求修复方案

核心问题与修改点 #

• 数组长度判断错误：原代码用Employees > 0判断数组是否有数据，这是无效写法，数组需通过length属性判断长度，应改为Employees.length > 0。
• 表格结构不合法：<tbody>的直接子元素必须是<tr>标签，不能直接渲染字符串，需将提示文本放入<tr><td>中，并通过colSpan="2"实现跨列显示。
• 冗余代码清理：导入的Button组件未使用，可直接删除。

修改后的完整代码 #

import React from "react";
import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Employees from "./Employees";

const Home = () => {
  return (
    <>
      <div>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            {Employees && Employees.length > 0 ? (
              Employees.map((item) => (
                <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan="2">No data available</td>
              </tr>
            )}
          </tbody>
        </Table>
      </div>
    </>
  );
};

export default Home;

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