在Div中添加子元素时，使用UseEffect触发Reach useRef()当前属性返回unidentified

在使用React的useEffect钩子和useRef钩子时，如果在div中添加子元素，可能会遇到useRef返回null或者undefined的情况。这种情况通常发生在组件初次渲染时，因为DOM元素还没有被创建，所以useRef无法获取到对应的DOM节点。

基础概念

• useRef: 用于在函数组件中创建一个可变的引用，该引用在组件的整个生命周期内保持不变。可以用来引用DOM节点或者保存任何可变值。
• useEffect: 用于在函数组件中执行副作用操作，比如数据获取、订阅或手动更改DOM等。

问题原因

当你在useEffect中使用useRef时，如果useEffect在DOM元素渲染之前执行，那么useRef将无法获取到对应的DOM节点，因此返回null或者undefined。

解决方案

确保useEffect在DOM元素渲染之后执行。可以通过给useEffect传递一个空数组作为第二个参数，这样useEffect只会在组件挂载和卸载时执行。

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const myDivRef = useRef(null);

  useEffect(() => {
    if (myDivRef.current) {
      // 在这里可以安全地访问DOM节点
      console.log(myDivRef.current);
    }
  }, []); // 空数组作为依赖，确保只在组件挂载和卸载时执行

  return (
    <div ref={myDivRef}>
      {/* 子元素 */}
    </div>
  );
}

export default MyComponent;

应用场景

这种模式常用于需要在组件挂载后立即操作DOM的场景，比如聚焦输入框、滚动到特定元素等。

参考链接

• React官方文档 - useRef
• React官方文档 - useEffect

通过这种方式，你可以确保在useEffect中安全地访问到通过useRef创建的DOM引用。