如何正确判断条件渲染的子组件forwardRef何时初始化？

方案1：自定义回调Ref（优先推荐） #

直接用回调形式的Ref替代useRef实例，既完成Ref赋值，又能在节点挂载时立即触发逻辑，完全绕开两层forwardRef的限制：

import { useRef } from 'react';

function ParentComponent() {
  const testRef = useRef(null);

  // 自定义回调Ref，节点挂载时自动触发
  const handleRef = (node) => {
    testRef.current = node;
    if (node) {
      // 这里写你需要在Ref初始化后执行的逻辑
      console.log('TestChild的Ref已就绪:', node);
    }
  };

  return (
    <ContainerLoading>
      <TestChild ref={handleRef} />
    </ContainerLoading>
  );
}

原理：不管TestChild和ContainerLoading怎么用forwardRef，最终都会把真实DOM节点传递给传入的Ref回调，所以直接在回调里处理初始化逻辑最直接。

方案2：用MutationObserver监听DOM变化 #

通过监听ContainerLoading所在的容器，当TestChild对应的DOM节点被添加时，就可以确认Ref已赋值：

import { useRef, useEffect } from 'react';

function ParentComponent() {
  const testRef = useRef(null);
  const containerRef = useRef(null); // 绑定到ContainerLoading的父容器

  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (mutation.addedNodes.length > 0 && testRef.current) {
          // 执行Ref初始化后的逻辑
          console.log('TestChild的Ref已就绪:', testRef.current);
          observer.disconnect(); // 只触发一次就断开监听
          break;
        }
      }
    });

    if (containerRef.current) {
      observer.observe(containerRef.current, {
        childList: true,
        subtree: true, // 如果TestChild在DOM深层，需要开启这个配置
      });
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      <ContainerLoading>
        <TestChild ref={testRef} />
      </ContainerLoading>
    </div>
  );
}

这个方案适合需要监听DOM结构变化的场景，性能开销很小。

方案3：轮询检测Ref状态（应急方案） #

如果以上两种方案都不适用，可以用短间隔轮询检测testRef.current是否赋值，虽然不够优雅，但不需要修改任何子组件：

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

function ParentComponent() {
  const testRef = useRef(null);
  const [isRefReady, setIsRefReady] = useState(false);

  useEffect(() => {
    const checkTimer = setInterval(() => {
      if (testRef.current) {
        setIsRefReady(true);
        clearInterval(checkTimer);
      }
    }, 50); // 50ms间隔轮询，可根据需求调整

    return () => clearInterval(checkTimer);
  }, []);

  useEffect(() => {
    if (isRefReady) {
      // 执行Ref初始化后的逻辑
      console.log('TestChild的Ref已就绪:', testRef.current);
    }
  }, [isRefReady]);

  return (
    <ContainerLoading>
      <TestChild ref={testRef} />
    </ContainerLoading>
  );
}

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