本文介绍如何在 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<string[]>([]);
// 预处理：按字符数智能分页（避免截断单词）
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 (
<div className="h-screen flex flex-col">
{/* 顶部导航栏 */}
<div className="flex items-center justify-between w-full h-11 z-10 bg-white drop-shadow-lg px-4">
<button
onClick={() => window.history.back()}
className="flex items-center text-indigo-800 font-medium"
>
← Home
</button>
<h1 className="text-sm font-bold truncate max-w-[50%] text-center">Book Title will be here</h1>
<span className="text-xs font-bold">Page {currentPage + 1} of {pages.length}</span>
<button className="text-indigo-900">
⚙️
</button>
</div>
{/* 内容区（居中、带内边距与阴影） */}
<div className="flex-1 overflow-hidden px-2 py-4 bg-zinc-50">
<div className="max-w-3xl mx-auto bg-white rounded-lg shadow p-6 leading-relaxed">
{pages[currentPage] || <p className="text-gray-500 italic">— End of article —</p>}
</div>
</div>
{/* 底部翻页栏 */}
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 flex gap-4 z-20">
<button
onClick={goToPrev}
disabled={currentPage === 0}
className={`p-3 rounded-full ${
currentPage === 0
? 'text-gray-400 cursor-not-allowed'
: 'text-indigo-600 hover:bg-indigo-50'
}`}
aria-label="Previous page"
>
◀
</button>
<button
onClick={goToNext}
disabled={currentPage === pages.length - 1}
className={`p-3 rounded-full ${
currentPage === pages.length - 1
? 'text-gray-400 cursor-not-allowed'
: 'text-indigo-600 hover:bg-indigo-50'
}`}
aria-label="Next page"
>
▶
</button>
</div>
</div>
);
}⚠️ 注意事项与优化建议
- 性能考量：对超长文本（>10 万字符），建议服务端预分页或使用 Web Worker 避免主线程阻塞；
- 响应式适配：pageSize 应随屏幕宽度动态调整（如移动端设为 800，桌面端 1400），可结合 useMediaQuery 实现；
- 无障碍支持：为翻页按钮添加 aria-label 和键盘导航（onKeyDown 支持 Enter/Space 触发）；
- SEO 友好：若需搜索引擎索引全部内容，建议服务端渲染（SSR）或使用
-
样式一致性：确保每页 高度固定（如 min-h-[70vh]），配合 overflow-y: auto 防止跳动。
通过以上方案，你不仅能精准控制每页字符量，还能兼顾用户体验与技术健壮性，真正打造媲美专业阅读器的沉浸式博客浏览体验。
