React-Virtuoso+Material UI实现行悬浮交互报错求助

出现Warning: validateDOMNesting(...): <tr> cannot appear as a child of <tr>的原因很直接：React Virtuoso的VirtuosoTable组件会自动为每一行渲染原生的<tr>元素，而你在rowContent里又嵌套了Material UI的<TableRow>（本质也是<tr>），导致DOM结构出现了<tr>嵌套<tr>的非法情况。

解决方法 #

方案1：通过rowProps添加悬浮与交互

不需要在rowContent里包裹<TableRow>，直接返回<TableCell>即可，然后利用Virtuoso提供的rowProps属性来配置悬浮样式和鼠标事件：

import { TableCell, tableRowClasses } from '@mui/material';

// 仅渲染表格单元格，不包裹TableRow
function rowContent(_index: number, row: Data) {
  return columns.map((column) => (
    <TableCell 
      key={column.dataKey} 
      align={column.numeric || false ? 'right' : 'left'}
    >
      {row[column.dataKey]}
    </TableCell>
  ));
}

// 在VirtuosoTable中配置rowProps
<VirtuosoTable
  data={data}
  columns={columns}
  rowContent={rowContent}
  rowProps={() => ({
    // 复用Material UI的hover样式类
    className: tableRowClasses.hover,
    onMouseEnter: () => console.log('hover triggered'),
    onMouseLeave: () => console.log('hover ended'),
  })}
/>

方案2：替换Virtuoso默认行组件为Material UI的TableRow

如果需要完全复用Material UI TableRow的所有属性和行为，可以通过components属性替换Virtuoso默认的Row组件，再结合rowProps传递配置：

import { TableRow, TableCell, TableRowProps } from '@mui/material';

// 自定义行组件，转发ref以兼容Virtuoso的内部逻辑
const CustomTableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>((props, ref) => {
  return <TableRow ref={ref} {...props} />;
});

// rowContent仍只返回TableCell
function rowContent(_index: number, row: Data) {
  return columns.map((column) => (
    <TableCell 
      key={column.dataKey} 
      align={column.numeric || false ? 'right' : 'left'}
    >
      {row[column.dataKey]}
    </TableCell>
  ));
}

// 配置VirtuosoTable
<VirtuosoTable
  data={data}
  columns={columns}
  rowContent={rowContent}
  components={{
    Row: CustomTableRow,
  }}
  rowProps={() => ({
    hover: true,
    onMouseEnter: () => console.log('hover'),
    // 可以添加更多TableRow支持的属性，比如onClick等
  })}
/>

两种方案都能避免<tr>嵌套的问题，同时实现你需要的悬浮效果和交互动作。

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