React中实现Google Docs式动态分页布局的教程

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

// 创建一个Context来传递更新父组件高度的方法
// 实际应用中，您需要实现此Provider
const UpdateParentAboutMyHeight = createContext<(h: number, index: number) => void>(
  () => {} // 默认空函数
);

/**
 * 一个自定义Hook，用于测量组件的offsetHeight，并通知父组件。
 *
 * @param {number} index 组件在列表中的索引，用于父组件识别。
 * @returns {React.RefObject<HTMLElement>} 一个ref对象，需要附加到要测量的DOM元素上。
 */
const useComponentSize = (index: number) => {
  // 获取父组件提供的回调函数
  const informParentOfHeightChange = useContext(UpdateParentAboutMyHeight);
  // 创建一个ref来引用DOM元素
  const targetRef = useRef<HTMLElement>(null);

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

    // 清理函数：在组件卸载时或依赖项变化时，通知父组件此组件高度为0
    return () => informParentOfHeightChange(0, index);
  }, [informParentOfHeightChange, index]); // 依赖项：通知函数和组件索引

  return targetRef;
};

interface ContentItemProps {
  id: string;
  index: number;
  content: React.ReactNode;
}

const ContentItem: React.FC<ContentItemProps> = ({ id, index, content }) => {
  // 将ref附加到需要测量高度的根DOM元素上
  const targetRef = useComponentSize(index);

  return (
    <div ref={targetRef} data-item-id={id} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
      {content}
    </div>
  );
};

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

// 假设每页的最大高度为1000px
const HEIGHT_PER_PAGE = 1000;

// UpdateParentAboutMyHeightProvider 的实现
// 它将提供一个回调函数给子组件，用于更新其高度
const UpdateParentAboutMyHeightProvider: React.FC<{
  children: React.ReactNode;
  onHeightUpdate: (index: number, height: number) => void;
}> = ({ children, onHeightUpdate }) => {
  return (
    <UpdateParentAboutMyHeight.Provider value={onHeightUpdate}>
      {children}
    </UpdateParentAboutMyHeight.Provider>
  );
};

interface PageProps {
  number: number;
  children: React.ReactNode;
}

const Page: React.FC<PageProps> = ({ number, children }) => (
  <div
    style={{
      minHeight: HEIGHT_PER_PAGE, // 可选：设置最小高度以模拟页面
      border: '1px solid #ccc',
      margin: '10px 0',
      padding: '20px',
      boxSizing: 'border-box',
      pageBreakAfter: 'always', // 打印时强制分页
    }}
  >
    <h3>Page {number}</h3>
    {children}
  </div>
);

interface ItemData {
  id: string;
  content: string; // 假设内容是字符串，实际可以是ReactNode
}

interface PageLayoutProps {
  items: ItemData[];
}

const PageLayout: React.FC<PageLayoutProps> = ({ items }) => {
  // 存储所有子组件的高度，key为索引
  const [itemHeights, setItemHeights] = useState<Record<number, number>>({});

  // useCallback 优化，确保 onHeightUpdate 引用稳定
  const onHeightUpdate = useCallback((index: number, height: number) => {
    setItemHeights(prevHeights => ({
      ...prevHeights,
      [index]: height,
    }));
  }, []);

  // 使用 useMemo 来缓存分页计算结果，避免不必要的重复计算
  const pages = useMemo(() => {
    const calculatedPages: Array<Array<ItemData>> = [];
    let currentPageItems: ItemData[] = [];
    let currentHeight = 0;

    items.forEach((item, index) => {
      const itemHeight = itemHeights[index] || 0; // 如果高度尚未测量，默认为0

      // 如果当前页加上当前项的高度会超出页面限制，则创建新页
      if (currentHeight + itemHeight > HEIGHT_PER_PAGE && currentPageItems.length > 0) {
        calculatedPages.push(currentPageItems);
        currentPageItems = [];
        currentHeight = 0;
      }

      // 将当前项添加到当前页
      currentPageItems.push(item);
      currentHeight += itemHeight;
    });

    // 添加最后一页（如果存在内容）
    if (currentPageItems.length > 0) {
      calculatedPages.push(currentPageItems);
    }

    // 如果没有任何内容，至少创建一个空页面
    if (calculatedPages.length === 0) {
        calculatedPages.push([]);
    }

    return calculatedPages;
  }, [items, itemHeights]); // 依赖项：原始数据和所有子组件的高度

  return (
    <UpdateParentAboutMyHeightProvider onHeightUpdate={onHeightUpdate}>
      {pages.map((pageItems, pageNumber) => (
        <Page number={pageNumber + 1} key={pageNumber}>
          {pageItems.map((item, itemIndex) => (
            <ContentItem
              key={item.id} // 使用item的唯一ID作为key
              id={item.id}
              index={items.findIndex(i => i.id === item.id)} // 找到原始items中的索引
              content={item.content}
            />
          ))}
        </Page>
      ))}
    </UpdateParentAboutMyHeightProvider>
  );
};