时间戳

首页 > 解决方案 > Material UI 工具提示不会显示在自定义组件上，尽管将道具传播到该组件

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

问题描述

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

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

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

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

PlannerIcon.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>
  );

标签： reactjstooltipmaterial-ui

解决方案

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

以下可以持有参考：

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

PlannerIcon 不是上述任何一种，它是一个函数组件。我会为这个问题提出两种解决方案：

  1. 以 div 作为父元素环绕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>
    )
  }
};

推荐阅读