本文介绍如何在 react 应用中实现类 pdf 的逐页阅读体验，通过按固定字符数（非单词数）切割长文本，并配合分页状态管理与导航按钮，实现平滑、可控的“翻页”效果。

在构建现代博客阅读体验时，滚动式长文虽常见，但对专注阅读、降低视觉疲劳而言，“分页式”呈现更具优势——类似电子书或 PDF 阅读器的一页一屏设计。关键在于：不依赖段落或单词边界，而是严格按字符数（如每页 1200 字符）切分内容，确保每页渲染区域高度一致、排版稳定。

✅ 核心实现思路

1. 预分割文本：在组件加载或数据获取后，将完整文章字符串按指定字符数（例如 pageSize = 1200）切分为若干页数组；
2. 状态驱动渲染：使用 useState 管理当前页码（currentPage），初始为 0；
3. 安全截断处理：避免在单词中间硬切——应在最近的空格或标点处回退，提升可读性；
4. 响应式导航控制：禁用无效按钮（如首页无“上一页”，末页无“下一页”），并更新页码显示。

? 示例代码（React + TypeScript）

import { useState, useEffect } from 'react';

export default function Read({ content }: { content: string }) {
  const pageSize = 1200; // 每页最大字符数（可根据字体/行高微调）
  const [currentPage, setCurrentPage] = useState(0);
  const [pages, setPages] = useState([]);

  // 预处理：按字符数智能分页（避免截断单词）
  useEffect(() => {
    if (!content) return;

    const splitPages = (): string[] => {
      const result: string[] = [];
      let start = 0;
      const len = content.length;

      while (start < len) {
        let end = Math.min(start + pageSize, len);
        // 向前查找最近的空格或换行符，避免单词被切断
        if (end < len && !/\s/.test(content[end])) {
          const lastSpace = content.lastIndexOf(' ', end);
          end = lastSpace > start ? lastSpace : end;
        }
        result.push(content.slice(start, end).trim());
        start = end;
      }
      return result;
    };

    setPages(splitPages());
  }, [content]);

  const goToPrev = () => currentPage > 0 && setCurrentPage(prev => prev - 1);
  const goToNext = () => currentPage < pages.length - 1 && setCurrentPage(prev => prev + 1);

  return (
    
      {/* 顶部导航栏 */}
      
         window.history.back()} 
          className="flex items-center text-indigo-800 font-medium"
        >
          ← Home
        
        
Book Title will be here
        Page {currentPage + 1} of {pages.length}
        
          ⚙️
        
      

      {/* 内容区（居中、带内边距与阴影） */}
      
        
          {pages[currentPage] || 
— End of article —
}
        
      

      {/* 底部翻页栏 */}
      
        
          ◀
        
        
          ▶
        
      
    
  );
}

⚠️ 注意事项与优化建议

• 性能考量：对超长文本（>10 万字符），建议服务端预分页或使用 Web Worker 避免主线程阻塞；
• 响应式适配：pageSize 应随屏幕宽度动态调整（如移动端设为 800，桌面端 1400），可结合 useMediaQuery 实现；
• 无障碍支持：为翻页按钮添加 aria-label 和键盘导航（onKeyDown 支持 Enter/Space 触发）；
• SEO 友好：若需搜索引擎索引全部内容，建议服务端渲染（SSR）或使用
• 样式一致性：确保每页 高度固定（如 min-h-[70vh]），配合 overflow-y: auto 防止跳动。

  通过以上方案，你不仅能精准控制每页字符量，还能兼顾用户体验与技术健壮性，真正打造媲美专业阅读器的沉浸式博客浏览体验。