React中如何将溢出固定高度Container的子组件移至新容器？

完全可以实现这种类似文档分页的容器拆分效果，而且支持递归生成多个容器，核心思路是通过DOM高度测量和子元素分组来实现，具体步骤和代码如下：

核心实现思路 #

1. 渲染后测量真实高度：React渲染完成后，通过useRef获取容器和子元素的真实DOM节点，计算实际高度（避免CSS动态计算导致的高度偏差）
2. 子元素分组逻辑：遍历所有子元素，累积计算高度，当累积高度超过容器固定高度时，将当前已选子元素作为一个容器的内容，剩余元素继续递归处理
3. 递归处理剩余元素：如果剩余元素总高度仍超过容器高度，重复分组逻辑，直到所有元素都分配到合适容器中

代码实现 #

1. 基础Container组件（保留原有结构，增加区分样式） #

const Container = ({ children }) => {
  return <div style={{ height: "500px", border: "1px solid #eee", margin: "10px 0", overflow: "hidden" }}>{children}</div>;
};

2. 分页处理自定义Hook #

封装Hook来复用分页逻辑：

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const useContainerPagination = (children, containerHeight = 500) => {
  const [paginatedChildren, setPaginatedChildren] = useState([]);

  useEffect(() => {
    if (!children) return;

    // 统一将子元素转为数组格式
    const childArray = Array.isArray(children) ? children : [children];
    const pages = [];
    let currentPage = [];
    let currentHeight = 0;

    // 遍历子元素并分组
    const processItems = (items) => {
      for (const child of items) {
        // 创建临时DOM节点测量子元素真实高度
        const tempEl = document.createElement('div');
        ReactDOM.createPortal(child, tempEl);
        document.body.appendChild(tempEl);
        const childHeight = tempEl.offsetHeight;
        document.body.removeChild(tempEl);

        // 判断加入当前子元素后是否溢出
        if (currentHeight + childHeight > containerHeight) {
          pages.push(currentPage);
          currentPage = [child];
          currentHeight = childHeight;
        } else {
          currentPage.push(child);
          currentHeight += childHeight;
        }
      }
      // 加入最后一组未完成的元素
      if (currentPage.length > 0) pages.push(currentPage);
    };

    processItems(childArray);
    setPaginatedChildren(pages);
  }, [children, containerHeight]);

  return paginatedChildren;
};

3. 封装PaginatedContainer组件 #

结合Hook和Container，简化使用：

const PaginatedContainer = ({ children, containerHeight = 500 }) => {
  const pages = useContainerPagination(children, containerHeight);

  return (
    <div>
      {pages.map((pageChildren, index) => (
        <Container key={index}>
          {pageChildren}
        </Container>
      ))}
    </div>
  );
};

4. 使用示例（替换原Page组件） #

const Page = () => {
  return (
    <PaginatedContainer containerHeight={500}>
      <div style={{ height: 250, width: "100%", border: "2px solid black", margin: "5px 0" }}></div>
      <div style={{ height: 250, width: "100%", border: "2px solid black", margin: "5px 0" }}>
        <div style={{ height: 200, width: "100%", border: "2px solid black", margin: "5px 0" }}></div>
      </div>
      <div style={{ height: 200, width: "100%", border: "2px solid black", margin: "5px 0" }}></div>
    </PaginatedContainer>
  );
};

注意事项 #

• 动态内容适配：如果子元素是异步加载的动态内容，需要在内容加载完成后（比如监听数据状态变化）重新触发分页计算
• 样式一致性：临时测量高度时，要保证子元素的样式（margin、padding等）和实际渲染时一致，避免高度计算偏差
• 性能优化：子元素数量极多时，可添加防抖逻辑，避免频繁触发高度计算

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