React中HOC包裹图标组件时Tooltip需点击一次才显示问题

Tooltip必须点击一次才正常显示的核心原因是高阶组件未正确透传ref。
MUI的Tooltip组件需要获取直接子元素的DOM引用，才能绑定mouseenter、mouseleave、focus等触发事件，监听悬停、聚焦状态控制提示框显隐。
当前componentGenerator实现中，虽然通过React.forwardRef接收了上层传入的ref，但渲染被包裹组件时没有把ref传递下去，Tooltip首次挂载时拿不到目标DOM节点，事件绑定失败；点击图标后组件触发焦点状态更新，Tooltip才重新拿到节点完成绑定，后续才能正常触发。

• 修改高阶组件，将接收到的ref透传给被包裹组件：

function componentGenerator(WrappedComponent) {
  function DynamicComponent(props, ref) {
    // 补充ref透传
    return <WrappedComponent ref={ref} {...props} />;
  }
  return React.forwardRef(DynamicComponent);
}

• 补充自定义MyIcon组件的ref绑定，将ref挂载到真实渲染的IconButton节点上，避免其他依赖ref的场景出问题：

const MyIcon = React.forwardRef((props, ref) => {
  return (
    // 将ref绑定到实际的DOM宿主组件
    <IconButton ref={ref} {...props}>
      <Avatar alt="Not working" src="/static/images/avatar/2.jpg"/>
    </IconButton>
  );
});

注意：所有作为MUI Tooltip、Popover、Modal这类浮层组件直接子元素的自定义组件，都必须保证ref能正确透传到最外层的真实DOM节点，否则就会出现事件绑定异常、触发逻辑不符合预期的问题。修复后两个Tooltip行为完全一致，无需提前点击，鼠标悬停即可正常弹出提示。

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