尽管将道具散布在该组件上，但材质UI工具提示不会显示在自定义组件上 [英] Material UI tooltip doesn't display on custom component, despite spreading props to that component

问题描述

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

I am having difficulties making the Material UI tooltip actually appear when hovering over a component. As far as I can tell, I am doing about the simplest implementation of the tooltip component: I import it directly (no custom styles or anything else yet), and I wrap it around another component that spreads out its props at the top level.

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

From reading the documentation it should be that simple, but it is not appearing on hover, and in the React DevTools I see that the anchorEl prop of is undefined.

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

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

PlannerIcon.js

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

推荐答案

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

以下内容可以保存参考:

The following can hold a ref:

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

• Any Material-UI component
• class components i.e. React.Component or React.PureComponent
• DOM (or host) components e.g. div or button
• React.forwardRef components
• React.lazy components
• React.memo components

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

PlannerIcon is not any of the above, it's a function component. I'll suggest Two solutions for the problem:

1. 围绕div作为父元素的 PlannerIcon (div可以容纳一个引用):

1. Surround PlannerIcon with div as a parent element (div can hold a ref):

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

将 PlannerIcon 转换为类组件:

Convert PlannerIcon into a class component:

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

这篇关于尽管将道具散布在该组件上，但材质UI工具提示不会显示在自定义组件上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！