React中useRef获取子组件DOM报错，页面加载后正常的问题求助

一、如何确保代码在input渲染完成后执行 #

你遇到的核心问题是自定义组件的Shadow DOM内部元素渲染时机晚于父组件的useEffect执行时机，直接通过索引访问DOM层级（children[3].children[2]）不仅脆弱，还会因为元素未挂载导致报错。以下是几种可靠的解决方式：

1. 优先使用选择器而非索引定位元素 #

放弃通过children索引的方式，改用querySelector直接定位input，这比依赖DOM结构稳定得多：

useEffect(() => {
  if (!textfieldRef.current) return;
  
  const getTargetInput = () => {
    // 用选择器精准定位input，可根据实际情况调整选择器（比如加类名）
    const input = textfieldRef.current.shadowRoot.querySelector('input');
    if (input) {
      input.style.height = '50px';
    } else {
      // 元素未加载，下一帧再检查
      requestAnimationFrame(getTargetInput);
    }
  };

  getTargetInput();
}, [textfieldRef]);

2. 用MutationObserver监听Shadow DOM变化 #

如果自定义组件内部DOM结构是异步渲染的，可以通过监听Shadow DOM的变化，直到目标input出现再执行操作：

useEffect(() => {
  if (!textfieldRef.current) return;
  const shadowRoot = textfieldRef.current.shadowRoot;
  
  const observer = new MutationObserver((mutations) => {
    const input = shadowRoot.querySelector('input');
    if (input) {
      input.style.height = '50px';
      observer.disconnect(); // 找到元素后停止监听
    }
  });

  // 监听Shadow DOM的子元素变化
  observer.observe(shadowRoot, { childList: true, subtree: true });

  return () => observer.disconnect(); // 组件卸载时清理监听
}, [textfieldRef]);

3. 让自定义组件暴露接口（最优方案） #

直接操作子组件内部DOM是反模式，最稳妥的方式是给textfield组件添加控制input样式的props，比如：

// 自定义textfield组件内部
const Textfield = ({ inputHeight }) => {
  return (
    <div>
      {/* 其他元素 */}
      <input style={{ height: inputHeight }} />
    </div>
  );
};

// 父组件使用
return <textfield inputHeight="50px" />;

这种方式完全不需要依赖ref，符合React组件的封装原则。

二、为什么textfieldRef的current有时为null，有时有值 #

React中ref的current值遵循以下规则：

• 组件挂载完成前，ref的current是null；
• 组件挂载完成后，React会将组件实例（或DOM元素）赋值给ref的current；
• 如果组件发生卸载，current会被重置为null；如果组件重新挂载，current会再次被赋值为目标对象。

你看到的"同时有null和目标对象"的情况，大概率是因为在组件挂载过程中，ref的current处于从null到目标对象的过渡阶段，或者在某些渲染周期里（比如初始渲染）current还未被赋值，而后续渲染中才完成赋值。

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