React中向外部库传递DOM元素时，兼顾加载状态显示与元素可被库定位的解决方案咨询

你的问题核心在于：当loading为true时，目标元素#el没有被渲染到DOM中，导致外部库的build函数找不到它。下面是几个可行的解决思路，都能保证元素存在的同时显示加载状态：

方案1：让元素始终存在，用CSS控制可见性 #

这个方案最简单：不管加载状态如何，始终渲染#el元素，通过display或visibility属性控制它的可见性，同时在加载时显示加载器。

import { useState, useEffect } from 'react';

function YourComponent() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 此时#el已经在DOM中，可以安全调用build
    Promise.all(build("#el"))
      .then(() => {
        // 这里写build完成后的逻辑
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      <Component1 />
      {/* 元素始终渲染，加载时隐藏 */}
      <div 
        id="el" 
        style={{ 
          display: loading ? 'none' : 'block',
          // 如果需要保留布局空间，可以用visibility: loading ? 'hidden' : 'visible'
        }} 
      />
      {/* 加载器在加载时显示 */}
      {loading && (
        <div style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 9999
        }}>
          Loading...
        </div>
      )}
      <Component />
    </>
  );
}

为什么有效：元素从组件挂载开始就存在于DOM中，build函数能正常找到它；加载时通过CSS隐藏元素，用户看不到，加载完成后再显示，同时加载器提供视觉反馈。

方案2：使用React Ref直接传递DOM元素（更可靠） #

避免使用ID选择器，改用React的useRef获取元素引用，确保元素挂载后再调用build函数，这是React中操作DOM的推荐方式。

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

function YourComponent() {
  const [loading, setLoading] = useState(true);
  const elRef = useRef(null); // 创建ref关联目标元素

  useEffect(() => {
    // 确保ref已经指向真实的DOM元素
    if (!elRef.current) return;

    // 直接传递DOM元素给build，比ID选择器更精准
    Promise.all(build(elRef.current))
      .then(() => {
        // build完成后的逻辑
      })
      .finally(() => setLoading(false));
  }, [elRef.current]); // 依赖ref.current，确保元素挂载后执行

  return (
    <>
      <Component1 />
      {/* 始终渲染元素，用ref关联 */}
      <div 
        ref={elRef} 
        style={{ 
          visibility: loading ? 'hidden' : 'visible',
          // visibility:hidden会保留元素的布局空间，避免页面跳动
        }} 
      />
      {loading && <div>Loading...</div>}
      <Component />
    </>
  );
}

为什么有效：useRef能直接获取到DOM元素的引用，不需要依赖全局ID；useEffect的依赖是elRef.current，只有当元素真正挂载到DOM后，这个值才会更新，build函数才会执行，完全避免了元素不存在的问题。

方案3：用容器包裹加载器和目标元素 #

如果需要保持布局的稳定性，可以把加载器和目标元素放在同一个容器里，容器始终占据布局空间，内部切换显示加载器或目标元素。

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

function YourComponent() {
  const [loading, setLoading] = useState(true);
  const elRef = useRef(null);

  useEffect(() => {
    if (!elRef.current) return;

    Promise.all(build(elRef.current))
      .then(() => {})
      .finally(() => setLoading(false));
  }, [elRef.current]);

  return (
    <>
      <Component1 />
      {/* 容器固定布局，内部元素切换显示 */}
      <div style={{ width: '800px', height: '600px', position: 'relative' }}>
        {loading && (
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#fff'
          }}>
            Loading...
          </div>
        )}
        <div ref={elRef} style={{ display: loading ? 'none' : 'block', width: '100%', height: '100%' }} />
      </div>
      <Component />
    </>
  );
}

为什么有效：容器固定了宽高，不会因为元素显示隐藏导致页面布局跳动；加载器覆盖在容器上方，用户看不到下方的目标元素，加载完成后隐藏加载器，显示目标元素。

这些方案的核心都是保证调用build函数时，目标元素已经存在于DOM中，同时通过视觉手段隐藏元素并显示加载状态，既解决了库找不到元素的问题，又提供了良好的用户体验。

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