React组件折叠问题：URL解析阶段Ref未初始化

核心问题 #

当路由解析提前设置isSelected为true时，组件还未完成渲染，elementRef.current仍为null，直接访问scrollHeight会触发报错。核心需求是确保DOM元素挂载完成后再执行高度计算。

方法1：useEffect + useState 动态设置高度 #

通过useEffect在组件渲染完成后执行DOM操作，保证ref已指向真实DOM元素：

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

function YourComponent() {
  const elementRef = useRef(null);
  const [isSelected, setIsSelected] = useState(false); // 路由解析后会更新为true
  const [elementHeight, setElementHeight] = useState('0px');

  // 监听isSelected和elementRef变化，更新高度
  useEffect(() => {
    if (isSelected && elementRef.current) {
      // 元素挂载且需要展开时，获取真实scrollHeight
      setElementHeight(`${elementRef.current.scrollHeight}px`);
    } else {
      setElementHeight('0px');
    }
  }, [isSelected, elementRef]);

  return (
    <Element 
      ref={elementRef}
      style={{ 
        height: elementHeight,
        overflow: 'hidden',
        transition: 'height 0.3s ease' // 可选：添加过渡动画
      }} 
    />
  );
}

原理 #

useEffect会在组件渲染完成、DOM更新后执行，此时elementRef.current已指向渲染后的DOM元素，能安全获取scrollHeight。

方法2：CSS max-height 替代JS计算（推荐） #

如果不需要精确控制高度，直接用CSS过渡实现展开/收起，完全避开ref的问题：

/* 基础样式 */
.element {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 展开状态 */
.element.expanded {
  max-height: 2000px; /* 设置足够大的值，覆盖所有可能的内容高度 */
}

function YourComponent() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <Element 
      className={`element ${isSelected ? 'expanded' : ''}`}
    />
  );
}

优势 #

• 无需操作DOM，彻底避免ref未初始化的问题
• 代码更简洁，性能开销更低
• 过渡动画更流畅自然

方法3：useLayoutEffect 同步获取DOM属性 #

如果需要在DOM更新后立即同步计算高度（比如避免视觉闪烁），可以用useLayoutEffect替代useEffect，它会在DOM更新后同步执行：

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

function YourComponent() {
  const elementRef = useRef(null);
  const [isSelected, setIsSelected] = useState(false);
  const [elementHeight, setElementHeight] = useState('0px');

  useLayoutEffect(() => {
    if (isSelected && elementRef.current) {
      setElementHeight(`${elementRef.current.scrollHeight}px`);
    } else {
      setElementHeight('0px');
    }
  }, [isSelected, elementRef]);

  return (
    <Element 
      ref={elementRef}
      style={{ height: elementHeight, overflow: 'hidden' }} 
    />
  );
}

注意 #

useLayoutEffect会阻塞渲染，仅在需要同步DOM操作时使用，优先推荐useEffect或CSS方法。

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