Question

在我的应用程序代码中，最近我遇到了一个使用useRef钩子的怪异错误，在该钩子中，我需要有条件地渲染组件并在其上放置useImperativeHandle来调用某些子方法。在各种渲染中，如果我使用myRef.current.<function>可以正常工作，但是如果我使用const c = myRef.current然后再使用c.<function>则无法正常工作，因为c未定义。看一下我想复制此示例的示例：

https://codesandbox.io/s/jolly-thunder-y1ft0?file=/src/index.js:115-313（由于SO还不支持JSX，因此无法在此处添加代码段）

编辑：一个更好的例子-https://codesandbox.io/s/focused-stonebraker-gd7gq?file=/src/App.js

在安装了WorksFine组件的情况下，运行代码并查看控制台。现在注释掉WorksFine，然后取消注释DoesNotWorkFine，看看会发生什么。我希望这可以弄清楚我的要求。

我的印象是useRef返回了一个对象，该对象的current属性可以被更改，并且可以在所有“过去”或将来的渲染中使用。我在这里想念什么？

Answer 1

给我的印象是useRef返回一个对象，该对象的当前属性可以更改，并且可以在所有“过去”或将来的渲染中使用。

是的，DoesNotWorkFine组件的问题是它引用了容器的 content ，而不是容器本身。

如果重申有帮助，可以将useRef发出的对象视为一个容器，并且.current属性是该容器的内容。

// myRef is the container
const myRef = useRef(null);

// the "ref" variable below is not actually a ref as defined by React, it's the content
// inside the ref because it's pulling the `.current` property off the actual ref
const ref = myRef.current;

您可以随时进入容器，从容器中抓取的内容将是最新的。但是，如果您取出内容，那么当您仍然保留旧内容时，容器中的内容可能会发生变化。

useRef挂钩的行为不一致

1 个答案: