React Hooks：useRef Hook为什么.current为null？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个简单的组件示例：

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元素。我的理解是：

  1. 引用初始化为空值

  2. 引用将覆盖Null

但事实证明，它.current仍然是空的。这很不好，因为我想将观察值传递给需要Element类型参数的函数。

https://codesandbox.io/embed/purple-

forest-0460k

回答：

Ref.current为null，因为直到函数返回并呈现内容后才设置ref。所述useEffect钩触发间隔的阵列的内容的值传递给它的变化的时间。通过传入observed数组并传递记录observed到控制台的回调，可以利用useEffect挂钩完成任务。

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

编辑：这仅适用于第一个渲染，因为对参考的更改不会触发重新渲染。但是关于useEffect的一般声明仍然成立。如果要观察dom元素的引用的更改，则可以使用回调作为引用。

  <div 
    ref={el => { console.log(el); observed.current = el; }} // or setState(el)
    className="App"
  >

代码沙箱

以上是 React Hooks：useRef Hook为什么.current为null？ 的全部内容， 来源链接： utcz.com/qa/435623.html

回到顶部