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

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

// 定义一个Context，用于子组件向父组件报告高度变化
// 实际应用中，此Context应在父组件外部定义并提供
const UpdateParentAboutMyHeight = createContext<((h: number) => void) | null>(null);

/**
 * useComponentSize Hook
 * 测量并报告组件的offsetHeight
 * @returns {React.RefObject<HTMLElement>} 一个ref对象，需要绑定到要测量的DOM元素上
 */
const useComponentSize = () => {
  // 获取Context中提供的回调函数，用于通知父组件高度变化
  const informParentOfHeightChange = useContext(UpdateParentAboutMyHeight);
  // 创建一个ref，用于引用要测量的DOM元素
  const targetRef = useRef<HTMLElement>(null);

  useLayoutEffect(() => {
    if (targetRef.current && informParentOfHeightChange) {
      // 当组件挂载或DOM更新时，获取元素高度并通知父组件
      informParentOfHeightChange(targetRef.current.offsetHeight);
    }

    // 清理函数：当组件卸载时，通知父组件该组件的高度为0
    return () => {
      if (informParentOfHeightChange) {
        informParentOfHeightChange(0);
      }
    };
  }, [informParentOfHeightChange]); // 依赖项：当通知函数变化时重新执行

  return targetRef;
};

// 示例子组件，使用useComponentSize报告自身高度
const ContentItem = ({ id, content }: { id: string; content: string }) => {
  const targetRef = useComponentSize();
  return (
    <div ref={targetRef} data-id={id} style={{ marginBottom: '10px', border: '1px solid #eee', padding: '5px' }}>
      <p>{content}</p>
      {/* 模拟不同高度的内容 */}
      {id === 'item1' && <p>This is some additional content for item 1.</p>}
      {id === 'item3' && <p>This item has even more content to make it taller.</p>}
      {id === 'item3' && <p>Line 2.</p>}
      {id === 'item3' && <p>Line 3.</p>}
    </div>
  );
};

import React, { useState, useCallback, useMemo } from 'react';
// 假设 UpdateParentAboutMyHeight 和 ContentItem 已在上方定义

// UpdateParentAboutMyHeightProvider 的实现
const UpdateParentAboutMyHeightProvider = ({ children, onHeightChange }: {
  children: React.ReactNode;
  onHeightChange: (id: string, height: number) => void;
}) => {
  // 使用useCallback避免不必要的重新渲染
  const value = useCallback((height: number, id: string) => {
    onHeightChange(id, height);
  }, [onHeightChange]);

  return (
    <UpdateParentAboutMyHeight.Provider value={(h) => {
      // 在实际应用中，这里需要一种方式来识别是哪个子组件报告的高度
      // 例如，子组件可以在Context中接收一个带有其ID的函数
      // 为了简化，我们假设子组件在调用时能隐式或通过其他方式传递ID
      // 这里的实现需要更精细，例如：
      // const childId = someMechanismToGetChildId();
      // onHeightChange(childId, h);
      // 由于useComponentSize的实现是通用的，这里需要调整
      // 一个更实际的方案是：每个ContentItem在渲染时提供一个特定的Context Provider
      // 或者在useComponentSize中返回一个包含ID的报告函数
      // 考虑到原始答案的简单性，我们先按其思路模拟
      // 实际使用时，ContentItem应通过props接收一个报告函数，而不是全局Context
      // 或者Context的value是一个Map，让子组件更新自己的条目
    }}>
      {children}
    </UpdateParentAboutMyHeight.Provider>
  );
};

// 修正后的 useComponentSize 和 ContentItem，以便正确传递ID
const UpdateParentAboutMyHeightWithId = createContext<((id: string, h: number) => void) | null>(null);

const useComponentSizeWithId = (id: string) => {
  const informParentOfHeightChange = useContext(UpdateParentAboutMyHeightWithId);
  const targetRef = useRef<HTMLElement>(null);

  useLayoutEffect(() => {
    if (targetRef.current && informParentOfHeightChange) {
      informParentOfHeightChange(id, targetRef.current.offsetHeight);
    }
    return () => {
      if (informParentOfHeightChange) {
        informParentOfHeightChange(id, 0); // 组件卸载时报告高度为0
      }
    };
  }, [informParentOfHeightChange, id]);

  return targetRef;
};

const ContentItemWithId = ({ id, content }: { id: string; content: string }) => {
  const targetRef = useComponentSizeWithId(id);
  return (
    <div ref={targetRef} data-id={id} style={{ marginBottom: '10px', border: '1px solid #eee', padding: '5px' }}>
      <p>{content}</p>
      {id === 'item1' && <p>This is some additional content for item 1.</p>}
      {id === 'item3' && <p>This item has even more content to make it taller.</p>}
      {id === 'item3' && <p>Line 2.</p>}
      {id === 'item3' && <p>Line 3.</p>}
    </div>
  );
};


const HEIGHT_PER_PAGE = 300; // 每页最大高度，单位像素

const PageLayout = ({ initialItems }: { initialItems: { id: string; content: string }[] }) => {
  // 存储所有子组件的高度，key为组件ID，value为高度
  const [itemHeights, setItemHeights] = useState<{ [key: string]: number }>({});

  // 处理子组件报告高度变化的函数
  const handleHeightChange = useCallback((id: string, height: number) => {
    setItemHeights(prevHeights => ({
      ...prevHeights,
      [id]: height,
    }));
  }, []);

  // 使用useMemo来缓存分页结果，避免不必要的重新计算
  const pages = useMemo(() => {
    let currentPageHeight = 0;
    let currentPageItems: { id: string; content: string }[] = [];
    const allPages: Array<Array<{ id: string; content: string }>> = [currentPageItems];

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

      // 如果当前页面加上新项目的高度将超过一页的最大高度
      if (currentPageHeight + itemHeight > HEIGHT_PER_PAGE && currentPageItems.length > 0) {
        // 开启新页面
        currentPageItems = [item];
        allPages.push(currentPageItems);
        currentPageHeight = itemHeight;
      } else {
        // 添加到当前页面
        currentPageItems.push(item);
        currentPageHeight += itemHeight;
      }
    });
    return allPages;
  }, [initialItems, itemHeights]); // 依赖项：原始项目列表或任何项目高度变化时重新计算

  return (
    <UpdateParentAboutMyHeightWithId.Provider value={handleHeightChange}>
      {pages.map((pageItems, pageNumber) => (
        <div key={pageNumber} style={{
          minHeight: HEIGHT_PER_PAGE, // 确保页面有最小高度
          border: '1px dashed blue',
          margin: '20px 0',
          padding: '10px',
          boxSizing: 'border-box'
        }}>
          <h3>Page {pageNumber + 1}</h3>
          {pageItems.map((item) => (
            <ContentItemWithId key={item.id} id={item.id} content={item.content} />
          ))}
        </div>
      ))}
    </UpdateParentAboutMyHeightWithId.Provider>
  );
};

// 示例用法
const App = () => {
  const items = [
    { id: 'item1', content: 'This is the first item. It has some text.' },
    { id: 'item2', content: 'Second item, relatively short.' },
    { id: 'item3', content: 'Third item, with more content to demonstrate height differences.' },
    { id: 'item4', content: 'Fourth item, short again.' },
    { id: 'item5', content: 'Fifth item, moderate length.' },
    { id: 'item6', content: 'Sixth item.' },
    { id: 'item7', content: 'Seventh item, quite long, potentially spanning pages.' },
    { id: 'item8', content: 'Eighth item.' },
    { id: 'item9', content: 'Ninth item.' },
    { id: 'item10', content: 'Tenth item, last one.' },
  ];

  return (
    <div>
      <h1>Dynamic Pagination Example</h1>
      <PageLayout initialItems={items} />
    </div>
  );
};

export default App;