反应：自定义参考（无DOM）

Question

几年来我一直在使用React，今天我鼓励了一个非常独特的用例，需要解决。我需要自己做个裁判。有某些库可以做到这一点，但我还不知道它们是怎么做到的。

所以基本上我需要做的是

const ref = useRef();

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

<Menu ref={ref}/>

我的自定义组件：

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

 return <CustomMenuComponent />
}

因此，基本上我需要在父级中公开此方法。我知道这可以通过状态来完成，应该以这种方式完成，我刚刚为问题添加了最小用例。 因此，基本上我需要在组件中公开一些方法，最好使用引用。

Answer 1

为此，有一个很少需要的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} />;
}

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

Answer 2

也就是说，当使用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} />;
}