带加载更多按钮的折叠列表点击后高度不变无法展示全部条目如何修复

问题原因 #

• useEffect依赖项缺失：当前的useEffect仅监听loaded和showCard两个变量，点击加载更多后，列表内容（即组件入参children）发生变化，但children没有加入依赖数组，useEffect不会触发执行，scrollHeight状态没有更新，因此容器高度始终保持初始值，新增的列表项被限制无法展示。
• 潜在报错风险：在style属性中直接读取collapsibleEl.current.scrollHeight，如果组件初始化阶段ref还未绑定完成，会出现读取null属性的报错。

修复方案 #

1. 把children加入useEffect的依赖数组，确保列表内容变化时会重新计算容器高度
2. 移除style中直接读取ref的逻辑，统一通过scrollHeight状态控制高度，添加ref非空判断避免报错
3. 可选优化：将固定height改为maxHeight，不仅能实现相同的折叠展开效果，还能适配后续内容动态变化的场景，搭配CSS transition可以实现流畅的高度过渡动画

修改后代码 #

const Collapsible = ({ showCard, loaded, children }) => {
  const collapsibleEl = useRef(null);
  const [scrollHeight, setScrollHeight] = useState(0);

  useEffect(() => {
    // 先判断ref是否存在，避免报错
    if (!collapsibleEl.current) return;
    const currentHeight = collapsibleEl.current.scrollHeight;
    setScrollHeight(currentHeight);
    console.log(currentHeight);
  // 加入children依赖，列表内容变化时自动重新计算高度
  }, [loaded, showCard, children]);
  
  return (
    <div
      className={styles.collapsible}
      ref={collapsibleEl}
      style={{
        // 不需要动画的话可以把maxHeight改回height
        maxHeight: showCard ? `${scrollHeight + 100}px` : '0px',
        overflow: 'hidden' // 需确保样式表中没有覆盖这个属性，否则折叠效果会失效
      }}
    >
      {children}
    </div>
  );
};
export default Collapsible;

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