为Material Table添加FlipMove行动画不生效的自定义实现方法咨询

之前配置不生效的核心原因 #

你当前的写法存在两个结构性问题，直接导致动画无法正常触发：

• 组件层级错位：MTableBody本身的渲染输出就是原生<tbody>标签，你把FlipMove套在MTableBody外层，最终生成的DOM是 FlipMove（默认渲染div容器） 包裹着 tbody。一方面这种结构不符合HTML表格的嵌套规范（div不能直接放在table内部），另一方面也不满足FlipMove的工作要求——需要做位置动画的tr元素和FlipMove隔了一层tbody，根本不在FlipMove的直属子元素范围内，自然追踪不到位置变化。
• 浏览器的DOM容错修正机制会自动把table内部不合法的div节点移出table结构，直接打乱FlipMove依赖的节点位置参考，动画从触发层面就没有基础。

正确的适配修改方案 #

核心思路是让FlipMove直接承担<tbody>的渲染角色，所有表格行tr作为它的直属子元素，既符合HTML结构规范，也满足FlipMove追踪元素位置的要求。
不要直接嵌套使用现成的MTableBody组件，而是自定义Body组件替换默认渲染逻辑：

1. 给FlipMove配置tag="tbody"属性，让它跳过默认的div渲染，直接输出符合规范的tbody标签
2. 直接在这个FlipMove容器内遍历表格行数据，渲染原本的Row组件（也就是tr元素），替代MTableBody默认的tbody包裹逻辑
   具体代码配置如下：

components={{
  // 自定义Body组件，替代默认的MTableBody
  Body: (bodyProps) => {
    return (
      <FlipMove
        tag="tbody"
        staggerDurationBy={30}
        duration={750}
        delay={30}
        // 关闭不必要的容器尺寸调整，避免表格布局错位
        enterAnimation="none"
        leaveAnimation="none"
        style={{ margin: 0, padding: 0 }}
      >
        {/* 复用原有的Row组件渲染所有行，tr作为FlipMove的直属子元素 */}
        {bodyProps.data.map((rowData, rowIndex) => {
          const RowComponent = bodyProps.components.Row;
          return (
            <RowComponent
              key={rowData.tableData.id}
              {...bodyProps}
              data={rowData}
              index={rowIndex}
            />
          )
        })}
      </FlipMove>
    )
  }
}}

容易踩坑的注意点 #

• 一定要给每一行tr设置稳定的key值，FlipMove依赖key值追踪元素的位置变化，没有稳定key会导致动画判断失效
• 不需要尝试在tbody内部再套一层FlipMove容器，这种结构因为浏览器的DOM修正机制根本无法稳定生效，直接让FlipMove渲染tbody本身是最稳妥的方案
• 如果使用的是v2及更早版本的react-flip-move，将代码里的tag属性替换为旧版的typeName即可，效果完全一致
• 如果需要保留行进入/退出的动画效果，可以根据实际布局调整enterAnimation、leaveAnimation的参数，不要直接用默认的高度动画，避免表格行的布局出现跳动

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