ReactJS：检测父Div外的元素并拆分显示内容

核心思路 #

通过获取父容器和子元素的DOM位置信息，对比子元素的底部坐标是否超出父容器的底部坐标，以此判断元素是否溢出。在React中需要借助useRef获取真实DOM，useEffect在组件渲染完成后执行检测逻辑，同时处理窗口大小变化时的重新检测。

实现代码 #

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

export default function App() {
  const data = [
    { id: 1, name: "test1" },
    { id: 2, name: "test2" },
    { id: 3, name: "test3" },
    { id: 4, name: "test4" },
    { id: 5, name: "test5" },
    { id: 6, name: "test6" },
    { id: 7, name: "test7" },
    { id: 8, name: "test8" }
  ];

  const [visibleItems, setVisibleItems] = useState([]);
  const [overflowItems, setOverflowItems] = useState([]);
  const parentRef = useRef(null);
  const childRefs = useRef([]);

  useEffect(() => {
    const detectOverflow = () => {
      if (!parentRef.current) return;
      
      const parentRect = parentRef.current.getBoundingClientRect();
      const parentBottom = parentRect.bottom;
      const visible = [];
      const overflow = [];

      data.forEach((item, index) => {
        const childEl = childRefs.current[index];
        if (!childEl) return;
        
        const childRect = childEl.getBoundingClientRect();
        // 判断子元素底部是否在父容器底部范围内
        if (childRect.bottom <= parentBottom) {
          visible.push(item);
        } else {
          overflow.push(item);
        }
      });

      setVisibleItems(visible);
      setOverflowItems(overflow);
    };

    // 初始渲染后执行检测
    detectOverflow();
    // 窗口大小变化时重新检测
    window.addEventListener('resize', detectOverflow);

    return () => {
      window.removeEventListener('resize', detectOverflow);
    };
  }, [data]);

  return (
    <div>
      <div
        ref={parentRef}
        style={{
          height: "120px",
          background: "red",
          display: "flex",
          flexDirection: "column"
        }}
      >
        {visibleItems.map((el, index) => (
          <div key={el.id} ref={el => childRefs.current[index] = el}>
            {el.name}
          </div>
        ))}
      </div>
      {/* 溢出元素展示容器 */}
      {overflowItems.length > 0 && (
        <div style={{ marginTop: '10px', background: 'blue', color: 'white' }}>
          {overflowItems.map(el => (
            <div key={el.id}>{el.name}</div>
          ))}
        </div>
      )}
    </div>
  );
}

关键细节说明 #

• useRef的作用：parentRef获取父容器DOM节点，childRefs数组存储所有子元素的DOM引用，方便逐个获取位置信息。
• getBoundingClientRect()：该方法返回元素相对于视口的位置和尺寸数据，通过对比子元素与父容器的底部坐标，准确判断元素是否溢出。
• 窗口resize监听：如果父容器高度会随窗口变化，添加resize事件监听可确保窗口尺寸改变时重新执行检测，避免判断失效。
• 状态分离渲染：将可见元素和溢出元素分别存入状态，再渲染到对应的容器中，实现需求中的分离展示。

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