クライアント側のページへの対応

こんにちはここで私はどのように反応してクライアント側のページ化を実装する方法を教えている.
あなたのアプリケーションのユーザーは、スクロールすると、より多くのコンテンツを表示するには、次または前のボタンを使用して良いことではないスクロールの退屈な経験を通して、アプリケーションのユーザーを置く必要はありませんか?十分な話をしてコードに入りましょう.
このチュートリアルでは、すでに作成する反応アプリでプロジェクトを設定する方法を既に知っていると仮定します.
まず最初に、コンポーネントを作成して、プレースホルダに参加して、約50人のユーザを表示するように要求を行います.

import React from "react";

  const Posts 
 = () => {
    const [posts, setPosts]=useState([])

    useEffect(()=>{
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div className='body'>
            <h2 style={{textAlign:'center', marginBottom:'20px'}} >Paginations</h2>
            {posts.map((post)=>(
                <div key={post.id} style={{marginBottom:'20px'}} >
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
        </div>
    );
};

これは、それがどのようにページ化なしで見えるかです

...
次に、前と次のボタンに対するページネーションとロジックに役立つ定数を作成します

現在のページ番号

ページごとに表示するアイテム数

現在のページ

ページ化されたポスト

コードでこのようになります

  const Posts = () => {
    const [posts, setPosts]=useState([])
    const [pageNumber, setPageNumber]= useState(1)
    const [postNumber]= useState(5)


    const currentPageNumber = (pageNumber * postNumber) - postNumber  
    const paginatedPosts = posts.splice(currentPageNumber, postNumber)

    const handlePrev =()=>{
        if(pageNumber === 1) return
        setPageNumber(pageNumber - 1)
    }
    const handleNext =()=>{
        setPageNumber(pageNumber + 1)
    }

    useEffect(()=>{

        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div>
            <h2>Posts</h2>
            {paginatedPosts.map((post)=>(
                <div key={post.id}>
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
            <div>Page {pageNumber} </div>
            <div>
                <button onClick={handlePrev} >prev</button>
                <button onClick={handleNext}>next</button>
            </div>
        </div>
    );
};

そして今我々はこれを持って👇

それは、人々が反応で単純なページ化です、これは私の非常に最初の記事です、そして、私は反応とJavaScriptでより多くを書いています.
あなたが反応やJavaScriptに苦労しているすべてのものがありますか?あなたは[email protected]にメールを送ることができます.
できれば全力を尽くします.歓声❤❤