React中useRef在AuthWrapper子组件中无法获取DOM元素的解决方法

问题核心在于：AuthWrapper初始状态下未渲染子组件（input），而App组件中仅依赖空数组的useEffect会在组件首次挂载时执行，此时input还未被创建，因此inputRef.current为undefined。

以下是两种规范简洁的解决方法：

方法1：使用回调Ref（无需修改AuthWrapper） #

利用React的回调Ref特性，当input元素挂载/卸载时，回调函数会自动触发，此时可以直接获取到DOM元素：

function App(props) {
  let inputRef = React.useRef();
  
  // 回调Ref：元素挂载时传入DOM节点，卸载时传入null
  const handleInputRef = (element) => {
    inputRef.current = element;
    if (element) {
      // 在这里执行你需要操作input的逻辑
      console.log('currentRef', element);
    }
  };

  return (
    <AuthWrapper>
      <input placeholder='Enter your name' ref={handleInputRef} />
    </AuthWrapper>
  );
}

这种方式无需改动AuthWrapper，直接在App组件内处理，逻辑清晰且符合React的Ref使用规范。

方法2：让AuthWrapper暴露认证状态（需修改AuthWrapper） #

通过给AuthWrapper添加回调props，将认证状态传递给App组件，App监听状态变化后再操作input：

首先修改AuthWrapper：

function AuthWrapper({children, onAuthStatusChange}){
  let [auth, setAuth] = React.useState(null);
  React.useEffect(()=>{
    // 模拟认证逻辑，实际替换为你的认证代码
    setTimeout(() => {
      setAuth(true);
    }, 2000);
  }, []);

  // 认证状态变化时通知父组件
  React.useEffect(() => {
    if (onAuthStatusChange) {
      onAuthStatusChange(auth);
    }
  }, [auth, onAuthStatusChange]);

  return auth ? <>{children}</> : <>Loading...</>;
}

然后在App组件中监听认证状态：

function App(props) {
  let inputRef = React.useRef();
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  React.useEffect(()=>{
    // 认证通过且input已挂载时执行逻辑
    if (isAuthenticated && inputRef.current) {
      console.log('currentRef', inputRef.current);
    }
  }, [isAuthenticated]);

  return (
    <AuthWrapper onAuthStatusChange={setIsAuthenticated}>
      <input placeholder='Enter your name' ref={inputRef} />
    </AuthWrapper>
  );
}

这种方式适合需要在App中根据认证状态执行更多逻辑的场景，耦合度低且扩展性好。

内容的提问来源于stack exchange，提问作者I wrestled a bear once.