Question

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

通过阅读文档应该很简单，但是它并没有出现在鼠标悬停时，在React DevTools中，我看到的anchorEl属性未定义。

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

Answer 1

您的工具提示无法正常工作，因为Material-UI工具提示的子级必须能够保留参考。

以下内容可以保存参考：

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

PlannerIcon不是以上任何内容，它是一个功能组件。我将针对该问题提出两种解决方案：

围绕div作为父元素的 PlannerIcon （div可以容纳一个引用）：
```
<Tooltip text="Planner">
  <div>
   <PlannerIcon />
  </div>
</Tooltip>
```

将 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

我相信您需要title =“ Planner”而不是text =“ Planner”。

<Tooltip title="Planner"><PlannerIcon /></Tooltip>

Answer 3

我知道这可能很奇怪，但是也许尝试将svg图标作为组件导入，因为反应16.4（目前不确定）可以将svgs作为组件导入。

import { ReactComponent as YourName} from './assets/yourfile.svg';

那么您可以简单地做到这一点：

const PlannerIcon = (props) => (
  <YourName {...props}/>
  );

让我知道您是否尝试过，是否有帮助。

@edit 我在他们的文档中没有看到任何称为文本的道具，也许您是说标题？ Tooltip api

Answer 4

不需要 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> 标记。

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

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

尽管将道具散布到该组件上，材质UI工具提示也不会显示在自定义组件上

4 个答案: