React动态渲染函数组件时MUI Tooltip/Transition与ref转发问题

MUI 的 Tooltip、Collapse/Fade/Slide 这类 Transition 动画组件，默认要求直接子元素可以接收并绑定 DOM ref，用来计算浮层定位、触发动画、绑定交互事件。你当前的嵌套结构里，TooltipWrapper、TransitionWrapper 都是未做 ref 转发的普通函数组件，ref 传递链路在中间包装层断裂，就会触发组件异常。

核心原则：整条渲染链路上的所有包装组件，都要通过 React.forwardRef 做 ref 透传，直到最底层的实际 DOM 节点，不要在中间层截断 ref。
按从底到顶的顺序修改所有组件即可：

• 最底层业务元素组件（Panel/Label/Button等）：用 forwardRef 包裹，将拿到的 ref 直接绑定到组件最外层的真实 DOM 节点上
• TransitionWrapper 包装层：用 forwardRef 包裹，无论是否渲染动画组件，都将 ref 继续向下传递给子元素
• TooltipWrapper 包装层：用 forwardRef 包裹，无论是否渲染 Tooltip，都将 ref 继续向下传递给子元素
• 递归渲染的 Component 组件：本身不需要额外创建 ref，只要将上层传入的 ref 顺着包装链向下透传即可

import { forwardRef, cloneElement } from 'react';
import { createRoot } from 'react-dom/client';
import { Tooltip, Collapse, Fade, Slide } from '@mui/material';

// 底层业务组件示例：Panel，其余业务组件（Label/Button等）按相同逻辑实现
const Panel = forwardRef((props, ref) => {
  const { attributes, children } = props;
  // 将ref绑定到真实DOM节点
  return <div ref={ref} {...attributes}>{children}</div>;
});

const Label = forwardRef((props, ref) => {
  const { attributes, children } = props;
  return <span ref={ref} {...attributes}>{children}</span>;
});
const Button = forwardRef((props, ref) => {
  const { attributes, children } = props;
  return <button ref={ref} {...attributes}>{children}</button>;
});

// Transition包装层，全链路透传ref
const TransitionWrapper = forwardRef((props, ref) => {
  const { showTransition, children } = props;
  const components = { Collapse, Fade, Slide };
  
  if (showTransition) {
    const Type = components[showTransition.animationtype];
    // MUI原生Transition组件本身支持ref透传，直接传入即可
    return (
      <Type ref={ref} {...showTransition}>
        {children}
      </Type>
    );
  }
  // 无动画时直接把ref透传给子元素
  return cloneElement(children, { ref });
});

// Tooltip包装层，全链路透传ref
const TooltipWrapper = forwardRef((props, ref) => {
  const { showTooltip, children } = props;
  if (showTooltip) {
    return (
      <Tooltip title={showTooltip}>
        {/* Tooltip要求直接子元素能接收ref，将ref绑定到直接子元素 */}
        {cloneElement(children, { ref })}
      </Tooltip>
    );
  }
  // 无Tooltip时直接透传ref
  return cloneElement(children, { ref });
});

// 递归渲染的Component组件，支持ref转发
const Component = forwardRef((props, ref) => {
  const components = { LABEL: Label, BUTTON: Button, PANEL: Panel };
  const id = props.id;
  const component = useStoreValue(id);
  const Elem = components[component.type];
  
  const children = component.children.map((child) => (
    <Component id={child.id} key={child.id} />
  ));

  return (
    <TooltipWrapper showTooltip={component.attributes}>
      <TransitionWrapper showTransition={component.attributes}>
        <Elem ref={ref} attributes={component.attributes}>
          {children}
        </Elem>
      </TransitionWrapper>
    </TooltipWrapper>
  );
});

// 根节点渲染
const root = createRoot(document.getElementById('root'));
root.render(<Component />);

• 不要在任意包装层中给子元素额外套无意义的 DOM 容器，否则 ref 会错误绑定到容器节点，导致 Tooltip 定位偏移、动画触发异常
• 如果某一层需要结合 useImperativeHandle 自定义暴露方法，不要忘记把收到的原始 ref 合并后继续向下传递，不要截断链路
• 原代码中TransitionWrapper存在变量声明顺序问题：components定义在Type赋值语句之后，会触发临时死区报错，修复版本已调整顺序

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