尽管将道具传播到该组件，但材料 UI 工具提示不会显示在自定义组件上

Question

当鼠标悬停在组件上时，我很难让 Material UI 工具提示真正出现。据我所知，我正在做工具提示组件的最简单实现：我直接导入它（没有自定义样式或其他任何东西），然后我将它包裹在另一个组件周围，该组件在顶层展开其道具。

从阅读文档来看，它应该是那么简单，但它并没有出现在悬停时，并且在 React DevTools 中，我看到 anchorEl 属性是未定义的。

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

规划器图标.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

Answer 1

您的 Tooltip 无法正常工作，因为 Material-UI Tooltip 的子级必须能够保存 ref。

以下内容可以保存参考：

• 任何 Material-UI 组件
• 类组件，即 React.Component 或 React.PureComponent
• DOM（或主机）组件，例如 div 或按钮
• React.forwardRef 组件
• React.lazy 组件
• React.memo 组件

PlannerIcon 不是上述任何一个，它是一个功能组件。我会建议这个问题的两种解决方案：

1. 以 div 作为父元素的Surround PlannerIcon（div 可以保存一个 ref）：

   <Tooltip text="Planner">
     <div>
      <PlannerIcon />
     </div>
   </Tooltip>
   

2. 将PlannerIcon转换为类组件：

   class PlannerIcon extends React.Component {
     render(){
       return(
        <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
         {...props}
        >
          <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
          <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
          <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
        </Icon>
       )
     }
   };
   

Answer 2

无需使用 div 解决方法或将功能组件转变为一类组件。你可以使用forwardRef来代替，它也可以工作：

const PlannerIcon = React.forwardRef((props, ref) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
    ref={ref}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  ));

我不确定该Icon组件是关于什么的，您可能需要将其转换为<svg>标签。

如果有人使用打字稿，语法有点混乱，第一种类型是 the ，ref第二种类型是 the props（不要问我为什么）：

const PlannerIcon = React.forwardRef<SVGSVGElement | null, IPlannerIconProps>((props, ref) => {
    ...
});