reactjs - 如何使用自定义钩子(Hook)共享引用？

Question

我试图在我的自定义组件上保留全局引用并在其他地方使用它，但不知怎的，我的钩子(Hook) useHookWithRefValue 没有返回我更新引用值，尽管我已经找到了 的解决方法>useHookWithRef 但我每次都试图避免 ref.current 。这种行为背后的原因是什么？

这背后的解释是什么？

import React from "react";

export const textFieldRef = React.createRef(null);

export function useHookWithRef() {
  return textFieldRef; // Works!!
}

export function useHookWithRefValue() {
  return textFieldRef.current; // Always returns null
}

Answer 1

第二个钩子(Hook)总是返回 null 的原因是它基本上返回 textFieldRef.current 在创建时的值，即 null 。当文本字段元素渲染时，React 告诉 ref.current 指向输入元素，但这不会触发重新渲染，也不会使您的钩子(Hook)输出更新的值。

另一方面，第一个钩子(Hook)返回对 ref 对象的引用，因此如果在 React 将 ref 的 current 设置为指向文本字段元素后检查 current ，您将得到实际元素。

您可以做的一件事是使用 callback ref为了在渲染后立即将文本字段元素设置为某种全局状态:

<input ref={inputElement => setTextFieldElement(inputElement)} />

然后您可以将此状态传递给需要使用文本字段元素引用的任何其他组件 React context .

这还允许您仅传递上下文中的文本字段元素，而无需每次使用时都使用 .current。

我已经根据您提供的沙箱实现了此解决方案: https://codesandbox.io/s/so-68234884-xuru1?file=/src/App.js

但是，对于您的用例来说，这可能有点过头了，您可以在使用此引用时坚持调用 .current 。