0

我需要将我的自定义组件包装在 Material UI Tooltip 中。我相信我正在正确使用 ForwardRefs，但是无论事件如何（悬停、单击等），工具提示都不会出现

const MyComp = ({ buttonRef }) => {
    return <button ref={buttonRef}>this does not work</button>;
};

const MyCompForwardRef = React.forwardRef((props, ref) => {
  return <MyComp {...props} buttonRef={ref} />;
});

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref}>this also does not work</button>
));

const Page = () => (
  <div style={{ display: "flex", flexDirection: "column" }}>
    <div style={{ margin: "10px" }}>
    <Tooltip title="23456789">
      //not working
      <MyCompForwardRef />
    </Tooltip>
  </div>
  <div style={{ margin: "10px" }}>
  <Tooltip title="23456789">
    //not working
    <FancyButton />
  </Tooltip>
  </div>
  <div style={{ margin: "10px" }}>
    <Tooltip title="23456789">
      <button>this works</button>
    </Tooltip>
  </div>
</div>);

这是沙盒链接https://codesandbox.io/s/material-ui-card-styling-example-forked-9tqod?file=/src/index.js:438-914

4

1 回答 1

2

首先您需要更新所有版本，尤其是 MUI 版本。

其次，您还需要传递道具，因此它将 Tooltip 样式和事件应用于内部组件。

MUI 文档中提到的所有内容

const MyComp = ({ buttonRef, ...props }) => {
  return (
    <button {...props} ref={buttonRef}>
      work
    </button>
  );
};

const MyCompForwardRef = React.forwardRef((props, ref) => {
  return <MyComp {...props} buttonRef={ref} />;
});

const FancyButton = React.forwardRef((props, ref) => {
  return (
    <button {...props} ref={ref}>
      work
    </button>
  );
});

https://codesandbox.io/s/mui-forwardref-tooltip-issue-forked-8u5vm?file=/src/index.js

于 2021-05-20T19:59:45.287 回答