如何在React中实现类似Google Docs的动态分页效果

import React, { useRef, useLayoutEffect, useContext, createContext } from 'react';

// 创建一个Context，用于子组件向父组件报告高度变化
// 在实际应用中，你需要实现这个Provider
const UpdateParentAboutMyHeight = createContext<(index: number, height: number) => void>(
  (index, height) => {
    // 默认空函数，防止未提供Provider时报错
    console.warn("UpdateParentAboutMyHeightProvider not found. Height changes will not be reported.");
  }
);

/**
 * 自定义钩子，用于测量组件的高度并通知父组件。
 * @param {number} index - 组件在同级列表中的索引，用于父组件识别。
 * @returns {React.MutableRefObject<any>} - 一个ref对象，需要绑定到要测量的DOM元素上。
 */
const useComponentSize = (index: number) => {
  const informParentOfHeightChange = useContext(UpdateParentAboutMyHeight);
  const targetRef = useRef<HTMLElement>(null); // 使用HTMLElement作为ref的类型

  useLayoutEffect(() => {
    if (targetRef.current) {
      // 获取当前DOM元素的offsetHeight
      const height = targetRef.current.offsetHeight;
      // 通知父组件此组件的高度
      informParentOfHeightChange(index, height);
    }

    // 清理函数：当组件卸载时，通知父组件其高度变为0
    return () => informParentOfHeightChange(index, 0);
  }, [informParentOfHeightChange, index]); // 依赖项中包含index和informParentOfHeightChange

  return targetRef;
};

interface ItemProps {
  id: string;
  content: string;
  index: number; // 传递索引以便父组件识别
}

const ItemComponent: React.FC<ItemProps> = ({ id, content, index }) => {
  const targetRef = useComponentSize(index); // 传入索引

  return (
    <div ref={targetRef} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
      <h3>Item {id}</h3>
      <p>{content}</p>
      {/* 更多内容 */}
    </div>
  );
};

import React, { useState, useMemo, useCallback } from 'react';

// 假设这是你从表单或其他地方获取的原始数据
const initialItemsData = Array.from({ length: 20 }, (_, i) => ({
  id: `item-${i + 1}`,
  content: `这是第 ${i + 1} 项的内容。这里可以放置任意长度的文本，用于模拟动态内容。` +
           (i % 3 === 0 ? ' 这是一段特别长的内容，可能会跨行甚至多行，以测试分页效果。' : '')
}));

const HEIGHT_PER_PAGE = 600; // 每页的最大高度（像素）

const PageLayout: React.FC = () => {
  // 存储所有子组件的高度，键是索引，值是高度
  const [itemHeights, setItemHeights] = useState<Record<number, number>>({});
  const [itemsToRender, setItemsToRender] = useState(initialItemsData); // 你的原始数据

  // 提供给子组件的回调函数，用于更新高度
  const handleHeightChange = useCallback((index: number, height: number) => {
    setItemHeights(prevHeights => ({
      ...prevHeights,
      [index]: height,
    }));
  }, []);

  // 使用useMemo优化分页计算，只有当itemHeights或itemsToRender变化时才重新计算
  const pages = useMemo(() => {
    let currentPageHeight = 0;
    let currentPageIndex = 0;
    const paginatedContent: Array<Array<typeof initialItemsData[0]>> = [[]]; // 初始化第一页

    itemsToRender.forEach((item, index) => {
      const itemHeight = itemHeights[index] || 0; // 获取当前项的高度，如果未测量则默认为0

      // 如果当前页加上当前项的高度会超出页面限制
      if (currentPageHeight + itemHeight > HEIGHT_PER_PAGE && currentPageHeight > 0) {
        // 创建新页面
        currentPageIndex++;
        paginatedContent.push([]);
        currentPageHeight = 0; // 新页面的初始高度
      }

      // 将当前项添加到当前页面
      paginatedContent[currentPageIndex].push(item);
      currentPageHeight += itemHeight;
    });

    return paginatedContent;
  }, [itemHeights, itemsToRender]); // 依赖项

  return (
    <UpdateParentAboutMyHeight.Provider value={handleHeightChange}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        {pages.map((pageItems, pageNumber) => (
          <div
            key={pageNumber}
            style={{
              minHeight: HEIGHT_PER_PAGE, // 确保页面有最小高度
              border: '1px solid #ccc',
              padding: '15px',
              boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
              backgroundColor: '#fff',
              position: 'relative',
            }}
          >
            <h2 style={{ position: 'sticky', top: 0, backgroundColor: '#fff', zIndex: 10 }}>
              Page {pageNumber + 1}
            </h2>
            {pageItems.map((item, itemIndexInPage) => (
              // 注意：这里需要确保ItemComponent的key是全局唯一的，或者使用item.id
              // 并且传递正确的全局索引给useComponentSize
              <ItemComponent key={item.id} id={item.id} content={item.content} index={initialItemsData.findIndex(d => d.id === item.id)} />
            ))}
          </div>
        ))}
      </div>
    </UpdateParentAboutMyHeight.Provider>
  );
};

export default PageLayout;