javascript - 为什么使用 MUI Button 的自定义 Button 组件在使用 Tooltip 悬停时不起作用？

Question

我创建了一个包含 MUI 按钮的自定义按钮，以便选择默认 Prop 等。下面是我创建的简化示例，但问题仍然存在。

下面是代码，这里是一个代码框链接:https://codesandbox.io/s/material-ui-button-forwardref-tooltip-hover-problem-entv2?file=/Button.js

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref}>{props.children}</MuiButton>
));

<Tooltip title="I can hover" placement="top">
  <Button>Custom Button</Button>
</Tooltip>

根据 https://material-ui.com/api/tooltip/#props 上的工具提示文档, 我应该确保 child 可以持有一个 ref，所以我把它包裹在 React.forwardRef函数并通过 ref到 Material UI Button它正在返回的组件，但工具提示仍然无法正常工作。

有什么我想念的想法吗？

Answer 1

我想出了解决方案，所以我不会结束这个问题，而是留下我所做的。所以我忘记将 Prop 对象传播到包装的 MUI 按钮上，显然工具提示正在将一些东西传递给按钮，这对于使悬停工作很重要。可能是 onMouseOver , onMouseLeave , onFocus , onBlur , onTouchStart , 和 onTouchEnd Prop 是问题。

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref} {...props}>
    {props.children}
  </MuiButton>
));