useRef获取元素为null求助：条件渲染场景下如何解决？

你的推测完全正确，核心问题是操作ref时目标元素还未完成渲染，具体有两个关键诱因：

1. setBgImageLoaded(false)是异步状态更新，调用后组件不会立刻重新渲染，你设置的1秒定时器很可能在组件完成渲染、ref被赋值之前就触发，此时element.current仍为null。
2. 如果URL中的cover参数不是Rdn，setQuery(q)会更新query状态，导致switch分支不匹配，根本不会渲染带ref的<section>元素，自然拿不到有效ref。

方案1：用useEffect监听依赖，确保元素渲染后再操作ref #

把设置背景图片的逻辑放到监听bgImageLoaded和query的useEffect中，只有当元素确实完成渲染后，再执行DOM操作：

function Cover() {
  const [query, setQuery] = useState('Rdn');
  const [searchParams, setSearchParams] = useSearchParams({ cover: query });
  const [bgImageLoaded, setBgImageLoaded] = useState(true);
  const image = `/images/covers/mobile/${query}.jpg`;
  const element = useRef(null);

  useEffect(() => {
    const querystring = new URLSearchParams(document.location.search);
    const q = querystring.get('cover');
    if (q !== null) {
      setQuery(q);
    }
    SetBgImage();
  }, []);

  const SetBgImage = () => {
    load(image).then(() => {
      setBgImageLoaded(false);
    });
  };

  // 新增：监听状态变化，确保元素渲染后设置背景
  useEffect(() => {
    if (!bgImageLoaded && element.current) {
      setTimeout(() => {
        element.current.style.backgroundImage = `url(${image})`;
      }, 1000);
    }
  }, [bgImageLoaded, query, image]);

  function load(src) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.addEventListener('load', resolve);
      image.addEventListener('error', reject);
      image.src = src;
    });
  }

  if (bgImageLoaded) {
    return <span>loading...</span>;
  } else {
    switch (query) {
      case 'Rdn':
        return (
          <section 
            className={classList('Cover', query)}
            ref={element}
          >
          </section>
        );
      // 补充默认分支，避免组件无返回值
      default:
        return <span>Unsupported cover type</span>;
    }
  }
}

export default Cover;

方案2：使用回调ref（更精准控制） #

如果需要在元素挂载瞬间就执行逻辑，可以用回调ref，直接在元素赋值时触发操作：

// 替换原useRef定义
const elementRef = (el) => {
  if (el && !bgImageLoaded) {
    setTimeout(() => {
      el.style.backgroundImage = `url(${image})`;
    }, 1000);
  }
};

// 在<section>中使用回调ref
<section 
  className={classList('Cover', query)}
  ref={elementRef}
>
</section>

• 必须补充switch的default分支，避免query不匹配时组件无返回值，引发React渲染警告。
• useSearchParams初始化后不会自动同步query状态变化，若需要URL参数随query更新，需在query变化时手动调用setSearchParams({ cover: query })。

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