React项目中FontAwesome Icons无法显示Material-UI Tooltips问题求助

问题原因 #

Material-UI的Tooltip组件依赖子元素透传的ref定位触发位置，以及onMouseEnter/onMouseLeave等内置事件触发弹出逻辑。你封装的DeleteButtonIcon以及内部的FaWhite2rem组件如果没有做ref转发、也没有透传未显性声明的props，Tooltip注入的事件和ref就无法绑定到真实的DOM节点上，自然无法正常触发显示。 #

解决方案 #

方案1：给自定义组件增加ref转发（推荐） #

使用React的forwardRef改造DeleteButtonIcon，将ref和所有未显性声明的props透传给内部的FontAwesome组件：

import { forwardRef } from 'react';

export const DeleteButtonIcon = forwardRef(({
  className,
  id,
  onClick,
  ...rest // 接收Tooltip注入的额外事件props
}: { className?, id?: string, onClick?(event: any): any }, ref): JSX.Element => (
  <FaWhite2rem
    ref={ref} // 转发ref
    icon={faTrash}
    className={className}
    id={id}
    onClick={onClick}
    style={{ cursor: 'pointer' }}
    {...rest} // 透传所有额外props，包括Tooltip的鼠标事件
  />
));

如果FaWhite2rem是你二次封装的组件，也需要做同样的ref转发和props透传处理，确保属性最终传递到原生的SVG/FontAwesome根元素上。 #

方案2：嵌套原生DOM元素（快速兼容） #

如果不想修改自定义组件的实现，可以直接在Tooltip和自定义图标之间套一层原生DOM元素（比如span），让Tooltip直接和原生元素绑定即可：

<div className="p-2">
  <Tooltip
    arrow
    title={(
      <div>
        <h6>
          Delete
          {' '}
          {tool.toolName}
          {' '}
          Tool
        </h6>
      </div>
    )}
  >
    {/* 增加span原生标签包裹自定义图标 */}
    <span style={{ display: 'inline-block' }}>
      <DeleteButtonIcon
        id={`delete_${tool.toolId}`}
        onClick={() => { setOpenModal(tool) }}
        className="fa-2x"
      />
    </span>
  </Tooltip>
</div>

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