本文介绍如何在 react 应用中实现类 pdf 的逐页阅读体验，通过按固定字符数（非单词数）切割长文本，并配合分页状态管理与导航按钮，实现平滑、可控的“翻页”效果。
在构建现代博客阅读体验时，滚动式长文虽常见，但对专注阅读、降低视觉疲劳而言，“分页式”呈现更具优势——类似电子书或 pdf 阅读器的一页一屏设计。关键在于：不依赖段落或单词边界，而是严格按字符数（如每页 1200 字符）切分内容，确保每页渲染区域高度一致、排版稳定。
✅ 核心实现思路
- 预分割文本：在组件加载或数据获取后，将完整文章字符串按指定字符数（例如 pageSize = 1200）切分为若干页数组；
- 状态驱动渲染：使用 useState 管理当前页码（currentPage），初始为 0；
- 安全截断处理：避免在单词中间硬切——应在最近的空格或标点处回退，提升可读性；
- 响应式导航控制：禁用无效按钮（如首页无“上一页”，末页无“下一页”），并更新页码显示。
? 示例代码（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 ( {/* 顶部导航栏 */} 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）或使用
- 样式一致性：确保每页