Question

我试图在我的自定义组件上保留一个全局引用并在其他地方使用它，但不知何故我的钩子 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

第二个钩子总是返回null的原因是它基本上返回了创建时textFieldRef.current的值，即null。当 text-field 元素呈现时，React 告诉 ref.current 指向输入元素，但这不会触发重新呈现并且不会使您的钩子输出更新的值。

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

您可以做的一件事是使用 callback ref 以便在呈现时立即将您的文本字段元素设置为某个全局状态：

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

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

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

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

但是，对于您的用例，这可能是一种矫枉过正，只要您使用此引用，您就可以坚持调用 .current。

如何使用自定义钩子共享 Ref？

1 个答案: