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

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

// 1. 创建一个Context用于子组件向父组件传递高度信息
// 实际应用中，此Context的Provider需要由父组件提供，并传入一个更新函数
const UpdateParentAboutMyHeight = createContext<((h: number, index: number) => void) | undefined>(undefined);

/**
 * useComponentSize Hook
 * 测量并报告其引用元素的实际高度。
 * @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 && informParentOfHeightChange) {
      // 如果元素存在且父组件提供了更新函数，则报告当前元素的高度
      informParentOfHeightChange(targetRef.current.offsetHeight, index);
    }

    // 清理函数：当组件卸载时，报告高度为0，或从父组件的状态中移除
    return () => {
      if (informParentOfHeightChange) {
        informParentOfHeightChange(0, index); // 或者更复杂的逻辑来移除特定索引的高度
      }
    };
  }, [informParentOfHeightChange, index]); // 依赖项：当更新函数或索引变化时重新执行

  return targetRef;
};

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

const Comp: React.FC<CompProps> = ({ content, index }) => {
  const targetRef = useComponentSize(index); // 使用自定义Hook

  return (
    <div ref={targetRef} style={{ border: '1px solid #eee', marginBottom: '5px', padding: '10px' }}>
      {/* 这是一个示例内容，实际内容会根据表单动态填充 */}
      <p>{content}</p>
      <p>Component Index: {index}</p>
      {/* 更多内容... */}
    </div>
  );
};

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

// 假设 Page 组件只是一个简单的容器，显示页码和内容
const Page: React.FC<{ number: number; children: React.ReactNode }> = ({ number, children }) => (
  <div style={{
    minHeight: '200px', // 确保页面有可见高度
    border: '1px dashed blue',
    margin: '10px 0',
    padding: '20px',
    boxSizing: 'border-box'
  }}>
    <h3>Page {number}</h3>
    {children}
  </div>
);

// 每页的最大高度（像素），可根据实际需求调整
const HEIGHT_PER_PAGE = 600;

interface ItemData {
  id: string; // 唯一标识符
  content: string;
}

interface PageLayoutProps {
  itemsToRender: ItemData[]; // 待渲染的内容项
}

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

  // useCallback 优化：确保 informParentOfHeightChange 不会频繁变化
  const informParentOfHeightChange = useCallback((height: number, index: number) => {
    setItemHeights(prevHeights => {
      // 只有当高度发生实际变化时才更新状态
      if (prevHeights[index] !== height) {
        return { ...prevHeights, [index]: height };
      }
      return prevHeights;
    });
  }, []);

  // 使用 useMemo 缓存分页结果，只有当 itemHeights 或 itemsToRender 变化时才重新计算
  const pages = useMemo(() => {
    let currentPageHeight = 0;
    let currentPageIndex = 0;
    const paginatedContent: ItemData[][] = [[]]; // 初始一个空页面

    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 (
    // 使用 Context Provider 传递高度更新函数给所有子组件
    <UpdateParentAboutMyHeight.Provider value={informParentOfHeightChange}>
      {pages.map((pageItems, pageNumber) => (
        <Page number={pageNumber + 1} key={pageNumber}>
          {pageItems.map((item) => (
            // 渲染实际的子组件，并传递其索引和内容
            <Comp key={item.id} content={item.content} index={itemsToRender.findIndex(i => i.id === item.id)} />
          ))}
        </Page>
      ))}
    </UpdateParentAboutMyHeight.Provider>
  );
};