React中如何遍历ref绑定DOM元素的嵌套子节点

报错的核心原因是函数组件首次执行渲染逻辑时，useRef绑定的DOM节点还未挂载到真实页面，此时$target.current是初始值null，直接调用querySelectorAll必然报错。你之前的判断是对的：DOM查询的执行时机早于ref绑定完成的时机。

不要在组件渲染的同步执行流程里直接读取ref.current做DOM查询，把DOM查询逻辑放到DOM挂载完成的生命周期节点执行即可，不需要给每个子节点单独绑定ref，以下是两种常用实现：

方案1：使用useEffect钩子（最推荐，无额外复杂度） #

useEffect的回调会在组件完成真实DOM挂载、ref绑定完成之后触发，此时可以安全调用DOM查询方法：

import { useRef, useEffect } from 'react';

const HeaderNav = (props) => {
  const $target = useRef(null);

  useEffect(() => {
    // 此处执行时DOM已经挂载完成，$target.current就是对应的nav节点
    const $allLinks = $target.current.querySelectorAll('a');
    // 遍历、事件绑定等所有针对a标签的操作都可以在这里执行
    console.log('获取到的所有a标签：', $allLinks);
  }, []); // 空依赖数组表示仅在组件首次挂载完成后执行一次

  return (
    <nav id='header-nav' ref={$target}>
        <div id='shortcuts'>
            <a className='resources' href='#'>
                <span>0</span>
                <WidgetsIcon />
            </a>
            <a className='trash' href='#'>
                <DeleteSweepIcon />
            </a>
            <a className='history' href='#'>
                <RestoreIcon />
            </a>
        </div>
    </nav>
  )
}

如果nav内部的a标签是动态渲染、会随状态变化增减的，把对应状态加到useEffect的依赖数组中即可，依赖变化时会自动重新查询，拿到最新的a标签集合。

方案2：使用回调形式的ref #

如果需要在DOM节点刚绑定完成的瞬间就拿到内部元素，可以给父容器传入回调形式的ref，节点挂载时会自动触发该回调，入参就是当前的真实DOM节点：

const HeaderNav = (props) => {
  const bindNavRef = (navNode) => {
    if (navNode) {
      // 必须判断节点存在，组件卸载时回调会传入null，直接调用方法会报错
      const $allLinks = navNode.querySelectorAll('a');
      console.log('回调ref拿到的a标签：', $allLinks);
    }
  };

  return (
    <nav id='header-nav' ref={bindNavRef}>
        {/* 内部a标签结构和之前一致 */}
    </nav>
  )
}

• 不要在组件函数的同步渲染流程中直接编写DOM查询、修改逻辑。React渲染流程可打断、会重复执行，这类操作不仅无法拿到正确DOM，还会引发不可预期的bug
• 父容器调用querySelectorAll的性能开销远小于给所有子节点单独绑定ref、维护ref数组，这种场景下直接查询父ref内部节点是更合理的实现
• 如果需要给查询到的a标签绑定事件，记得在useEffect的返回清理函数中解绑，避免组件卸载后造成内存泄漏

内容的提问来源于stack exchange，提问作者zEn feeLo