我有一个简单的组件示例:
function App() {
const observed = useRef(null);
console.log(observed.current);
return (
<div ref={observed} className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我希望 observed.current
将是 element 类型,并且 current 不会为空,而是具有其所有属性的 div 元素。我的理解是:
- 引用的初始化值为 null
- Null 被引用覆盖
但事实证明,.current
仍然是空的。这很糟糕,因为我想将观察到的函数传递给需要 Element 类型参数的函数。
最佳答案
Ref.current
为 null,因为直到函数返回且内容呈现后才设置 ref。 useEffect每当传递给它的数组内容的值发生变化时,钩子(Hook)就会触发。通过在数组中传递 observed
并传递将 observed
记录到控制台的回调,可以利用 useEffect Hook 来完成您的任务。
useEffect(() => {
console.log(observed.current);
}, [observed]);
编辑:这仅适用于第一次渲染,因为对引用的更改不会触发重新渲染。但关于 useEffect 的一般说法仍然成立。如果你想观察 dom 元素的 ref 的变化,你可以使用 callback as ref.
<div
ref={el => { console.log(el); observed.current = el; }} // or setState(el)
className="App"
>
关于reactjs - React Hooks : Why is . useRef Hook 当前为 null?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56541342/