时间戳

首页 > 解决方案 > React：自定义 Ref（没有 DOM）

reactjs - React：自定义 Ref（没有 DOM）

问题描述

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

所以基本上我需要做的是

const ref = useRef();

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

<Menu ref={ref}/>

我的自定义组件：


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

 return <CustomMenuComponent />
}

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

标签： reactjsreact-native

解决方案

为此，有一个很少需要的useImperativeHandle钩子。它允许您指定外部组件在将 ref 传递给您的函数组件时将获得哪些外部组件：

const Menu = React.forwardRef((props, ref) => {
  const [value, setValue] = useState(0);

  useImperativeHandle(ref, () => {
    return {
      reset: () => setValue(0)
    }
  }, []);

  return <CustomMenuComponent />
});

// Usage:
const Example = () => {
  const ref = useRef();

  useEffect(() => {
    ref.current.reset();
  }, []);

  return <Menu ref={ref} />;
}

您可以在此处查看有关此挂钩的更多信息。正如他们在文档中提到的那样，您应该尽可能避免使用 refs，尽管您似乎意识到这一点，因为您将自己描述为“一个非常独特的用例”。

推荐阅读