本文介绍如何在 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）或使用
- 样式一致性：确保每页
