react自适应布局如何实现(React实现分页效果)
类别:编程学习 浏览量:1938
时间:2022-01-17 01:05:41 react自适应布局如何实现
React实现分页效果本文实例为大家分享了React实现分页效果的具体代码,供大家参考,具体内容如下
首先确保已经安装了antd,axios
jsx文件:
import React, { useState, useEffect } from 'react' import { Pagination } from 'antd'; import './loading.scss' import Unit from '../hml' const App = () => { // 设置第几页 const [num, setNum] = useState(1) // 获取的数据载体 const [data, setData] = useState([]) //刚才用挂载方法,二次获取不好用 useEffect(() => { Unit.getApi2('/home/mediareports', { // 数据页 page_number: num, // 每页多少数据 page_size: 10 }, {}).then((res) => { //获取数据 setData(res.data.data) }) }, [num]) const add = (e) => { //每次点击向前翻一页 setNum(e) } return ( <> <ul> {/* map生成数据 */} { data.map((item,index)=>{ return <a href={item.jump_url} key={index}><br /> { item.main_title } </a> }) } </ul> {/* 这里的问题虽然解决了,但是不知道为什么上传 e 能获取当前点击的下标而不是元素,不过我感觉应该和total有关 */} <Pagination defaultCurrent={num} total={500} onChange={(e)=>add(e)}/> </> ) } export default App
loading.scss文件:
// antd没有样式,下面代码可以解决这个问题 @import '~antd/dist/antd.css';
hml.js:(这就是我发的那个axios封装)
import axios from 'axios'; const Unit = { async getApi(ajaxCfg){ let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg}, { headers: ajaxCfg.headers }) return data; }, async getApi2(url,cfg,headers){ let data = await axios.get(url,{params:cfg}, { headers: headers }) return data; }, async postApi(url,cfg,headers){ let fd = new FormData(); for(let key in cfg){ fd.append(key, cfg[key]); } let data = await axios.post(url,fd, { headers: headers }) return data; }, async putApi(url,cfg,headers){ // import qs from 'qs'; // let data = await axios.put(url,qs.stringify(cfg),{ // headers: { // 'Content-Type':'application/x-www-form-urlencoded', // } // }) // return data; }, async requestApi(cfg,headers,file){ let fd = new FormData(); fd.append('param', JSON.stringify(cfg)); if(file){ // 上传证明 if(file.length){ for(let i=0,len=file.length;i<len;i++){ fd.append('files', file[i]); } }else { // 单个上传 for(let key in file){ fd.append(key, file[key]); } } } let data = await axios.post('/batch',fd, { headers: headers }) return data; } } export default Unit;
setupProxy.js:
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( // 设置路径 '/home', createProxyMiddleware({ target: 'https://home-api.pinduoduo.com', changeOrigin: true, }) ); };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- react重点和难点(关于React状态管理的三个规则总结)
- react 的事件机制(React如何优雅的捕获异常)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react常用组件及作用(React中的Context应用场景分析)
- react高阶组件怎么用(React 高阶组件HOC用法归纳)
- react的基本知识(React中refs的一些常见用法汇总)
- react代码质量检查(react如何实现一个密码强度检测器详解)
- react子组件的动态参数(浅谈React Component生命周期函数)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- react组件参数(浅析React中的受控组件和非受控组件)
- react源码教程(详解React 代码共享最佳实践方式)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- react路由原理解析(React配置子路由的实现)
- yii2对比springboot(yii2.0框架使用 beforeAction 防非法登陆的方法分析)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- react执行流程(React开启代理的2种实用方式)
- 双十二(双十二和双十一哪个划算)
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
热门推荐
- dedecms怎么改使用页面(dedecms从子目录移动到根目录的方法)
- php商城支付接口(php实现银联商务公众号+服务窗支付的示例代码)
- python爬虫开源代码(Python实现的文轩网爬虫完整示例)
- docker部署php本地开发环境(CentOS7环境下使用Docker搭建PHP运行环境的过程详解)
- sqlserver基本知识(sql server学习基础之内存初探)
- thinkphp框架实例(ThinkPHP框架整合微信支付之JSAPI模式图文详解)
- auto.js源码分享(最新热门脚本Autojs源码分享)
- mysql查询很慢怎么回事(MySQL Like模糊查询速度太慢如何解决)
- JS中对象的属性
- 数据库docker技术(总结Docker不适合部署数据库的7大原因)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9