根据页面上的字符分页

Question

我正在使用 ReactJS 开发一个博客站点，我希望当用户单击以查看完整内容时，而不是我们在大多数博客站点上获得的滚动行为，我想要一个逐页视图，就像我们在 PDF 阅读器中那样，其中用户单击该按钮，并在他继续阅读时将被带到一个新页面。

无论字数多少，如何限制每页上的字符数？ 例如：如果作者发布了 2000 字，我将只在第一页显示 500 字，当用户单击“下一页”按钮时，它会移动到另一个有 500 字的页面，直到用户到达文章的最后一个字。

我希望它看起来如何

这是代码

export default function Read() {
return (
    <div className="h-screen">
        <div className="flex items-center justify-between  w-screen h-[45px] z-10 bg-white drop-shadow-lg top-0">
            <Link className="flex items-center text-white bg-indigo-800 h-full" href="/"><ArrowLeftIcon
                className="w-6 text-white active:text-white"/><span>Home</span></Link>
            <div className="text-sm font-bold ">
                <p>Book Title will be here</p>
            </div>
            <div className="text-xs font-bold ">
                <p>Page 1</p>
            </div>

            <div className=" ">
                <AdjustmentsHorizontalIcon className="w-7 text-indigo-900 active:text-white"/>
            </div>
        </div>

        <div className="px-1.5 bg-zinc-300 shadow-lg">
            <p className="bg-white px-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum
                eius eligendi enim expedita ipsum iusto nemo, nisi perspiciatis
                quis vitae!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aspernatur aut deleniti doloremque eius eos eveniet, expedita facilis labore magni,
            </p>

        </div>
        <div className="pagination fixed bottom-0 left-0 right-0">
            <div className="active:bg-red-300 rounded-3xl">
                <ArrowLeftCircleIcon className="w-10 text-indigo-600"/>
            </div>

            <div className="active:bg-red-300 rounded-3xl">
                <ArrowRightCircleIcon className="w-10 text-indigo-600"/>
            </div>
        </div>
    </div>
)}

Answer 1

解决这个问题的一种方法是，您可以将“文章”（比如 2000 个单词）分成 4 个部分，每个部分附加一个index属性，并在开始时将其存储到数据库中，在获取下一页时，您可以查询下一节的previousIndex + 1 ，并将其发送回客户端。