如何用react實現一款page元件

語言: CN / TW / HK

theme: channing-cyan highlight: night-owl


這是我參與11月更文挑戰的第6天,活動詳情檢視:[2021最後一次更文挑戰](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/") > TIP 👉 **操千曲而後曉聲,觀千劍而後識器。——劉勰《文心雕龍·知音》**

前言

Web Component是前端界一直非常熱衷的一個領域,用第三方元件化的框架去實現的話,你需要依賴框架本身很多東西,很多時候我們只是簡單的幾個元件,不是很大,也不是很多,所以為了保證元件的`輕量,簡單`,其實這個時候我們並不想採用第三方的框架。 # Pagination 分頁 ### import ```js import Radio from '@/components/Pagination/Pagination'; ``` ### Props ##### 1. defaultCurrent * 型別:number * 預設值:1 * 說明:預設的當前頁數 ##### 2. total * 型別:number * 預設值:0 * 說明:資料總數 ##### 3. defaultPageSize * 型別:number * 預設值:10 * 說明:初始的每頁條數 ##### 4. pageSizeOptions * 型別:Array * 預設值:['10', '20', '30', '40', '50'] * 說明:每頁條數選項陣列 ##### 5. showSizeChanger * 型別:bool * 預設值:false * 說明:是否可以改變 pageSize ##### 6. showQuickJumper * 型別:bool * 預設值:false * 說明:是否可以快速跳轉至某頁 ##### 7. hideOnSinglePage * 型別:bool * 預設值:true * 說明:是否只有一頁時隱藏 ##### 8. simple * 型別:bool * 預設值:false * 說明:是否展示簡單的分頁 ##### 9. disabled * 型別:bool * 預設值:false * 說明:是否不可用 ##### 10. onChange * 型別:func (必填) * 預設值:無 * 說明:頁碼改變時的回撥函式,入參: * {number} pageNo 頁碼 * {number} pageSize 每頁條數 ##### 11. onShowSizeChange * 型別:func * 預設值:() => {} * 說明:每頁條數改變時的回撥函式,入參: * {number} pageNo 頁碼 * {number} pageSize 每頁條數 ##### 12. showTotal * 型別:func | bool * 預設值:false * 說明:顯示資料總數。當值為函式時,入參: * {number} total 資料總數 * {Array} range 陣列中有兩個數字,分別是當前頁的開始條數和結束條數 ##### 13. className * 型別:string | array | object(key: 樣式名,value: bool) * 預設值:無 * 說明:最外層元素樣式 ``` ``` 讓我們寫程式碼來實現一款page元件 ```js import React from 'react'; import PropTypes from 'prop-types'; import RcPagination from 'rc-pagination'; import './Pagination.scss'; /** * Pagination 分頁 * @see https://github.com/react-component/pagination */ class Pagination extends React.Component { // 入參型別檢查 static propTypes = { // 預設的當前頁數 defaultCurrent: PropTypes.number, // 資料總數 total: PropTypes.number, // 初始的每頁條數 defaultPageSize: PropTypes.number, // 每頁條數選項陣列,預設值:['10', '20', '30', '40', '50'] pageSizeOptions: PropTypes.arrayOf(PropTypes.string), // 是否可以改變 pageSize showSizeChanger: PropTypes.bool, // 是否可以快速跳轉至某頁 showQuickJumper: PropTypes.oneOfType([ PropTypes.bool, PropTypes.shape({ goButton: PropTypes.element }) ]), // 是否只有一頁時隱藏 hideOnSinglePage: PropTypes.bool, // 是否展示簡單的分頁 simple: PropTypes.bool, // 是否不可用 disabled: PropTypes.bool, /** * 頁碼改變時的回撥函式 * @param {number} pageNo 頁碼 * @param {number} pageSize 每頁條數 */ onChange: PropTypes.func.isRequired, /** * 每頁條數改變時的回撥函式 * @param {number} pageNo 頁碼 * @param {number} pageSize 每頁條數 */ onShowSizeChange: PropTypes.func, /** * 顯示資料總數 * @param {number} total 資料總數 * @param {[number]} range 陣列中有兩個數字,分別是當前頁的開始條數和結束條數 */ showTotal: PropTypes.oneOfType([ PropTypes.func, PropTypes.bool ]), // 最外層元素樣式 className: PropTypes.oneOfType([ PropTypes.string, PropTypes.array, PropTypes.objectOf(PropTypes.bool) ]) } // 入參預設值 static defaultProps = { defaultCurrent: 1, total: 0, defaultPageSize: 10, pageSizeOptions: ['10', '20', '30', '40', '50'], showSizeChanger: false, showQuickJumper: false, hideOnSinglePage: true, simple: false, onChange: () => {}, onShowSizeChange: () => {}, showTotal: false, disabled: false, }; constructor(props) { super(props); } render() { const { showTotal, ...restProps } = this.props; return (
`共${total}條` : null ): showTotal } prefixCls="pagination"/>
); } } export default Pagination; ``` 樣式這塊就先不放了 「歡迎在評論區討論」 #### 希望看完的朋友可以給個贊,鼓勵一下