React：自定义引用（没有 DOM）

Question

我已经使用 React 几年了，今天我鼓励我需要解决一个非常独特的用例。我需要自己做一个参考。有些图书馆可以做到这一点，但我还不知道他们是如何做到的。

所以基本上我需要做的是

const ref = useRef();

/**
 where ref.reset(); will work
*/

<Menu ref={ref}/>

我的自定义组件：

const Menu = () => {
  const reset = () => {
   setValue(0);
  }

 return <CustomMenuComponent />
}

所以基本上我需要在父级中公开这个方法。我知道这可以通过状态来完成，并且应该这样做，我刚刚为我的问题添加了一个最小用例。所以基本上我需要在组件中公开一些方法，最好使用 refs。

Answer 1

使用时就是这样useImperativeHandle。

useImperativeHandle自定义使用时暴露给父组件的实例值ref。

const Menu = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    reset: () => {
      console.log("reset");
    }
  }));

  return <></>;
});

export default function App() {
  const ref = useRef();

  useEffect(() => {
    ref.current.reset();
  }, []);
  return <Menu ref={ref} />;
}