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的setstate第二个参数(示例详解react中useState的用法)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react动态创建菜单并实现局部刷新(使用react-virtualized实现图片动态高度长列表的问题)
- react表单组件怎么写(react antd实现动态增减表单)
- react高阶组件怎么用(React 高阶组件HOC用法归纳)
- react初学难点(使用react的7个避坑案例小结)
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- react组件分析(react-diagram 序列化Json解读案例分析)
- react组件参数(浅析React中的受控组件和非受控组件)
- react app框架(浅谈React原生APP更新)
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- react基础知识详解(如何深入理解React的ref 属性)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
- 前《iLOOK》时装总监 《快乐大本营》御用造型师上线(快乐大本营御用造型师上线)
- 释小龙晒杀青照片 多重身份惹观众期待(释小龙晒杀青照片)
- 《九牛之人降魔传》开机 演员祁高坤化身九牛之人除魔卫道(九牛之人降魔传开机)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9