react
暖暖小时光
这个作者很懒,什么都没留下…
展开
-
如何搭建一个react项目(包含路由、权限)
init项目1.创建项目文件夹并进入mkdir react-projectcd react-project2.初始化npm输入npm init ,按照提示填写项目基本信息:webpack1.安装webpack(webpack4.X)npminstall--save-dev webpack webpack-cli -g(--save-dev与--save的区别:--save-dev表示只是在编译过程中所依赖的包,例如:webpack、sass-loader等 最后在转载 2020-07-08 13:28:07 · 1046 阅读 · 0 评论 -
ant design Table本地排序(汉字,数字,字符串)
根据官方文档介绍 ,排序是在Column上面添加的。这里就写个简单的例子(只有表头部分,一看就会)const columns = [ { title: '汉字', dataIndex: 'name', sorter:(a,b)=>a.name.localeCompare(b.name) }, {原创 2020-06-30 18:49:47 · 5118 阅读 · 1 评论 -
前端实现元素拖拽的组件react-draggable
参考官网https://www.npmjs.com/package/react-draggable原创 2020-05-15 15:14:28 · 6929 阅读 · 1 评论 -
关于react有些页面无法使用this.props.history.push进行路由跳转的问题
页面使用装饰器 connect 会导致路由缺失(一般只要是Link这种跳转,并且Route在当前页面,就不会出现路由缺失。我出现的情况是当前页面只有Link,控制台打印this的时候 很明显没有history这个方法)解决办法:使用withRouter包裹connect,实现跳转的问题;export default withRouter(connect()(App))...原创 2020-04-23 13:15:06 · 2820 阅读 · 0 评论 -
Axios请求关于点击按钮下载文件
axios.get(url,{params:params,responseType: 'blob'}).then(res = >{let blob = new Blob([res], {type: "application/vnd.ms-excel"});let objectUrl = URL.creat...转载 2019-11-06 15:11:33 · 698 阅读 · 0 评论 -
关于redux-thunk中间件的使用
安装 : npm install redux-thunk --savereducers中的所有操作都是同步的并且是纯粹的,reducer都是纯函数,纯函数是指一个函数的返回结果只依赖于它的参数,并且在执行的过程中不会对外部产生副作用在实际开发应用中,我们希望做一些异步(如Ajax请求)且不纯粹的操作(如改变外部的状态)这时候就要用到中间件的方式来实现在index中中...原创 2019-11-06 15:08:27 · 192 阅读 · 0 评论 -
解决react页面刷新,store中保存的状态消失问题
redux的store状态数据不是永久保存的,state只是一个内存机制。我们知道的本地数据库或者像localstorage之类的缓存系统才有可能长时间的保存数据,redux-persist可以让你的数据从state分离出来,保存到浏览器缓存中,以便实现数据的持久化存储下面是我自己的代码,没有使用thunk中间件我圈出的红色部分就是是用persist需要用到元素,其他关于actio...原创 2019-11-06 15:02:09 · 5101 阅读 · 0 评论 -
解决antd表格行操作获取不到数据的问题
<Table columns={columns1} dataSource={this.state.dclData} onRow = {(record) => { return { onClick: () => { console.log(record);//这里是点击行的数据,可以把需要的数据存入...原创 2019-11-06 14:54:40 · 4936 阅读 · 0 评论 -
关于react-router中点击路由跳转,找不到路由组件的问题
使用嵌套路由在父级不能用exact, 因为当你匹配路由时路径加了子路由,导致父级路由路径不匹配从而父子组件都显示不了。例如你这个/user/details 使用了exact,当路径变为/user/details/msg是匹配不到/user/details的,这样的话就无法渲染Details而msg又是在Detail里面所以也不会渲染...原创 2019-11-06 14:51:57 · 2367 阅读 · 0 评论 -
react-redux的安装以及chrome工具的使用
安装redux:npm install --save redux安装react-redux:npminstall --save react-redux安装chrome调试工具: npm install redux-devtools-extension --save-dev(chrome扩展插件要自己手动安装)不知道什么原因 安装react-redux一直失败,然后在packa...原创 2019-11-06 14:48:33 · 1384 阅读 · 0 评论 -
关于react -shouldComponentUpdate钩子函数,避免不必要的渲染引起的页面报错
父组件中的写法为 shouldComponentUpdate(nextProps, nextState) { if (nextState.document !== this.state.document) { return true } return false }参数nextSatate 指的是父组...原创 2019-05-24 10:10:42 · 1953 阅读 · 0 评论 -
react+antd学习记录篇(二)redux配置
在搭建完页面的路由之后,接下来写路由组件了。首先想到的就是 状态的管理1.状态管理js 新建redux文件夹,新建一个js文件,用来管理页面状态。一个js文件包括三个主要部分:①定义字符常量②定义state初始状态③reducer(即主要操作)④action creator(即工厂函数)redux默认是不能进行异步处理的,所以要利用redux-thunk2.index页面...原创 2019-03-20 16:50:54 · 166 阅读 · 0 评论 -
react+antd学习记录篇(一)router
刚接触这个框架,并尝试做一个后台项目,第一步肯定是要利用路由把整个页面的框架搭建起来1.首先在src文件夹下,新建一个router文件夹,然后在这个文件夹下新建一个js文件,用于存放侧边栏的json数据。类似于下面这样(我写的可能不是很标准,但是大概结构就是这样的)const routers = [{ sider:'Home', icon:'mail', ch...原创 2019-03-07 15:02:04 · 758 阅读 · 0 评论