NextUI Table中使用自定义组件包裹TableRow报错咨询

问题本质：NextUI的内部约束，不是你的实现错误 #

这个报错是NextUI Table组件的设计限制导致的——它要求TableBody的直接子节点必须是官方提供的TableRow组件，不能是自定义的中间组件。

两种写法的核心差异 #

官方正常写法 #

官方示例中TableBody直接嵌套TableRow，NextUI的Table组件会直接识别到子节点是自身的TableRow，调用其内部的getCollectionNode方法来管理行的状态、索引、集合关系等核心逻辑，所以能正常渲染。

自定义封装写法 #

当你把TableRow包在自定义Test组件里时，TableBody的直接子节点变成了你的自定义组件，而非NextUI原生的TableRow。NextUI会尝试调用子节点的getCollectionNode方法来维护表格内部集合，但自定义组件并没有这个方法，因此抛出TypeError: type.getCollectionNode is not a function。

可行的解决方式 #

不要封装整个TableRow，而是封装TableRow内部的单元格内容，示例如下：

// 只封装行内的单元格逻辑
const RowContent = ({ rowData }) => (
  <>
    <TableCell>{rowData.id}</TableCell>
    <TableCell>{rowData.title}</TableCell>
    <TableCell>{rowData.status}</TableCell>
  </>
);

// 使用时保留TableRow作为TableBody的直接子节点
<TableBody>
  {dataList.map(row => (
    <TableRow key={row.id}>
      <RowContent rowData={row} />
    </TableRow>
  ))}
</TableBody>

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