使用 react-bootstrap 对我的反应站点实施高级分页 [英] Implementing advanced pagination to my react site using react-bootstrap

问题描述

我一直在努力实现这个

有一段时间了，但不知道该怎么做.react-bootstrap 站点中没有明确的说明:

请帮助我实现高级.我的代码:

Paginate.js

从 'react' 导入 React从'react-bootstrap'导入{按钮，分页}从'react-router-bootstrap' 导入 { LinkContainer }const Paginate = ({ pages, page, isAdmin = false, keyword = '' }) =>{返回 (页 >1 &&(<分页>{[...Array(pages).keys()].map((x) => (<链接容器键={x + 1}到={!isAdmin?关键词?`/search/${keyword}/page/${x + 1}`:`/page/${x + 1}`:`/admin/productlist/${x + 1}`}><Pagination.Item active={x + 1 === page}>{x + 1}</Pagination.Item></LinkContainer>))}</分页>))}导出默认分页

productAction.js

export const listProducts = (platform = '', keyword = '', pageNumber = '', sortOrder = '') =>异步 (派遣) =>{尝试 {调度({ 类型:PRODUCT_LIST_REQUEST })const { 数据 } = 等待 axios.get(`/api/products?platform=${platform}&keyword=${keyword}&pageNumber=${pageNumber}&sortOrder=${sortOrder}`)派遣({类型:PRODUCT_LIST_SUCCESS，有效载荷:数据，})} 捕捉(错误){派遣({类型:PRODUCT_LIST_FAIL，有效载荷:error.response &&错误.响应.数据.消息?错误.响应.数据.消息: 错误信息，})}}

HomeScreen.js:

import React, { useState, useEffect } from 'react'import { Link, useParams } from 'react-router-dom'import { useDispatch, useSelector } from 'react-redux'从'react-bootstrap'导入{行，列}从'../components/Product'导入产品从'../components/Message'导入消息从../components/Loader"导入加载器从'../components/Paginate'导入分页从'../components/ProductCarousel' 导入 ProductCarousel从'../components/Meta'导入元从 '../actions/productActions' 导入 { listProducts }const HomeScreen = ({ match }) =>{const { platformId } = useParams();const 关键字 = match.params.keywordconst [sortOrder, setSortOrder] = useState('');//const category = match.params.id ?match.params.id : '';const 平台 = match.params.id ?match.params.id : '';const pageNumber = match.params.pageNumber ||1const dispatch = useDispatch()useEffect(() => {dispatch(listProducts(platformId，关键字，pageNumber，sortOrder))}, [调度, 关键字, platformId, pageNumber, sortOrder])const productList = useSelector((state) => state.productList)const { 加载、错误、产品、页面、页面} = productListconst sortHandler = (e) =>{setSortOrder(e.target.value);dispatch(listProducts(platformId, keyword, sortOrder));};返回 (<><元/>{! 关键字?(<ProductCarousel/>) : (<Link to='/' className='btn btn-light'>回去</链接>)}{/*类别&&<h2>{category}</h2>*/}
<li>排序方式{' '}<选择名称=排序顺序"onChange={sortHandler}><选项值=">最新</option><选项值=最低">最低</option><option value="highest">Highest</option></选择>
{加载?(<加载器></加载器>) : 错误 ?(<消息>{错误}</消息>) : (<><行>{products.map((product) => (<Col key={product._id} xs={6} md={6} lg={4} xl={3} height='100'><产品产品={产品}/></Col>))}</行><分页页数={页}页={页}关键字={关键字?关键字:''}/></>)}</>)}导出默认主屏幕

谢谢

解决方案

我建议你查看这个 repo:https://github.com/lukaaspl/ellipsis-pagination

I have been trying to achieve this

For a while now but don't know how to. There is no clear instruction in react-bootstrap site: https://react-bootstrap.github.io/components/pagination/ as to what to do with <Pagination.First />, <Pagination.Prev />, <Pagination.Ellipsis />, <Pagination.Next />, <Pagination.Last />

i currently have this simple pagination:

Please help me with implementing the advanced. My codes:

Paginate.js

import React from 'react'
import { Button, Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

const Paginate = ({ pages, page, isAdmin = false, keyword = '' }) => {
  return (
    pages > 1 && (
      <Pagination>
        {[...Array(pages).keys()].map((x) => (
          <LinkContainer
            key={x + 1}
            to={
              !isAdmin
                ? keyword
                  ? `/search/${keyword}/page/${x + 1}`
                  : `/page/${x + 1}`
                : `/admin/productlist/${x + 1}`
            }
          >
            
            <Pagination.Item active={x + 1 === page}>{x + 1}</Pagination.Item>
          </LinkContainer>
        ))}
      </Pagination>
    )
  )
}

export default Paginate

productAction.js

export const listProducts = (platform = '', keyword = '', pageNumber = '', sortOrder = '') => async (
  dispatch
) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST })

    const { data } = await axios.get(
      `/api/products?platform=${platform}&keyword=${keyword}&pageNumber=${pageNumber}&sortOrder=${sortOrder}`
    )

    dispatch({
      type: PRODUCT_LIST_SUCCESS,
      payload: data,
    })
  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

HomeScreen.js:

import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Message from '../components/Message'
import Loader from '../components/Loader'
import Paginate from '../components/Paginate'
import ProductCarousel from '../components/ProductCarousel'
import Meta from '../components/Meta'
import { listProducts } from '../actions/productActions'

const HomeScreen = ({ match }) => {
  
  const { platformId } = useParams();
  
  const keyword = match.params.keyword
  const [sortOrder, setSortOrder] = useState('');
  //const category = match.params.id ? match.params.id : '';
  const platform = match.params.id ? match.params.id : ''; 
  const pageNumber = match.params.pageNumber || 1

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(listProducts(platformId, keyword, pageNumber, sortOrder))
  }, [dispatch, keyword, platformId, pageNumber, sortOrder])
  

  const productList = useSelector((state) => state.productList)
  const { loading, error, products, page, pages } = productList

  const sortHandler = (e) => {
    setSortOrder(e.target.value);
    dispatch(listProducts(platformId, keyword, sortOrder));
  };


  return (
    <>
      <Meta />
      {!keyword ? (
        <ProductCarousel />
      ) : (
        <Link to='/' className='btn btn-light'>
          Go Back
        </Link>
      )}
      {/*category && <h2>{category}</h2>*/}
      <ul className="filter">
        <li>
          Sort By{' '}
          <select name="sortOrder" onChange={sortHandler}>
            <option value="">Newest</option>
            <option value="lowest">Lowest</option>
            <option value="highest">Highest</option>
          </select>
        </li>
      </ul>
      {loading ? (
        <Loader></Loader>
      ) : error ? (
        <Message>{error}</Message> 
      ) : (
        <>
          <Row>
            {products.map((product) => (
              <Col key={product._id} xs={6} md={6} lg={4} xl={3} height='100'>
                <Product product={product} />
              </Col>
            ))}
          </Row>
          <Paginate
            pages={pages}
            page={page}
            keyword={keyword ? keyword : ''}
          />
        </>
      )}
    </>
  )
}

export default HomeScreen

Thank you

解决方案

I suggest you to check this repo: https://github.com/lukaaspl/ellipsis-pagination

这篇关于使用 react-bootstrap 对我的反应站点实施高级分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！