Reactjs React Forward Ref不与自定义组件一起工作

我需要在材质UI工具提示中包装自定义组件。我相信我正确地使用了ForwardRefs，但是无论发生什么事件（悬停、单击等），工具提示都不会出现

constmycomp=（{buttonRef}）=>{
这不起作用；
};
const mycopforwardref=React.forwardRef（（道具，ref）=>{
返回；
});
const FancyButton=React.forwardRef（（props，ref）=>(
这也不起作用
));
常量页=（）=>(
//不起作用
//不起作用
这很有效
);

---

这里是沙盒链接

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

其次，您还需要传递道具，以便它将工具提示样式和事件应用于内部组件

书中提到的一切

constmycomp=（{buttonRef，…props}）=>{
返回(
工作
);
};
const mycopforwardref=React.forwardRef（（道具，ref）=>{
返回；
});
const FancyButton=React.forwardRef（（props，ref）=>{
返回(
工作
);
});

---

谢谢，因为我的自定义组件已经有了很多道具。我想我需要将传递到forwardRef的道具分离出来，并将它们传递到接收ref的元素中。正确吗？是的，您也可以检查文档

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

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