React
RaoMeng1995
这个作者很懒,什么都没留下…
展开
-
React对fetch的简单封装
import {getStrValue, isObjNull} from "./common";export function fetchPost(url, params, header) { if (isObjNull(header)) { header = {} } let formData = new FormData() if (par...原创 2019-02-14 11:43:41 · 868 阅读 · 1 评论 -
React通过redux缓存列表数据以及滑动位置,回退时恢复页面状态
在使用React和React-router实现单页面应用时,会有这样一个场景:从列表页面点击某项条目进入详情页,然后回退至列表页面时,列表页面会重新刷新,不仅数据重新获取了,滚动条也回到了顶部。用户要继续查看剩余数据的话,需要重新滑动到之前点击的那个条目,如果列表做了分页的话就更麻烦了,这对于用户体验来说是非常不好的。所以我们希望能做到,从二级页面回退至列表页面时,列表页面能保留之前的状态(数据...原创 2019-02-22 11:42:12 · 815 阅读 · 0 评论 -
create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法
在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,这时,如果我们在每次使用框架时,都将框架内所有资源都全部加载的话,这将使得页面的性能大大降低。这时,我们就需要对这些庞大的第三方框架做按需加载了。首先介绍下对单个框架做按需加载的方法其实在使用create-react-app脚手架的情况下,对单个框架做按需加载的方法,网...原创 2019-02-15 14:25:55 · 1117 阅读 · 0 评论 -
React-redux的原理以及简单使用
当一个react项目组件层级越来越深,页面越来越多的时候,数据在各个组件层级和页面之间传递的需求就会比较多,很多变量也需要做成可全局管理的。在这个时候,redux和react-redux的使用就很有必要了。它们能帮助我们很方便的进行项目全局性的数据管理。下面,就写一下我自己对 redux 和 React-redux 的学习以及使用的心得,权当是对学习过程的一种记录和分享。一、redux和Rea...原创 2018-12-11 18:13:43 · 829 阅读 · 0 评论 -
React计算antd的TreeSelect组件所选中的子节点数量
antd的TreeSelect组件在处理例如公司层级、学科系统、分类目录等等的树形选择需求时很好用。在使用这个组件时,我们往往需要获取所选中的所有节点以及所选中的所有子节点的数量。查看TreeSelect的api找到了组件的选中回调方法onChange在理解onChange方法的参数含义前,要先知道TreeSelect组件的数据格式onChange方法有三个参数,value表示所选中的...原创 2018-11-21 10:18:15 · 2679 阅读 · 0 评论 -
去掉antd的Input组件获取焦点时的蓝色边框
antd的Input输入框组件在获取焦点时会有蓝色的边框显示,最初尝试通过设置outline:none的方法去掉这个边框,但是发现这个方法不起作用。最终通过在F12调试页面下的Elements选项下的多次观察和实验,发现antd的Input组件在获取焦点情况下的蓝色边框是通过box-shadow来实现的,找到问题所在就很好解决了。解决方法的css样式如下:.ant-input-affix-w...原创 2018-11-21 10:17:24 · 10838 阅读 · 1 评论 -
React 解决fetch跨域请求时session失效
在解决fetch跨域请求接口的时候,一般都是让后台接口在返回头里添加//允许所有域名的脚本访问该资源header("Access-Control-Allow-Origin: *");确实这样是可以解决跨域请求的问题,但是如果我们要在请求的时候添加session,那么这样设置就会出现问题了。fetch添加Cookie验证的方法是设置credentials: ‘include’fetch...原创 2018-11-02 11:08:16 · 1256 阅读 · 0 评论 -
修改Antd组件样式的方法
1、F12打开调试,选中Elements选项2、在Elements的元素树中选中相应的Antd组件布局,然后查看右端的css样式表,找到控制组件的css控制器结构。3、最后在我们自己的css样式文件中修改对应的控制器属性就可以了...原创 2018-11-02 11:07:38 · 13077 阅读 · 6 评论 -
React 基础知识总结
一、Node.jsNode.js并不是一个JavaScript框架,Node.js是JavaScript运行时的运行环境,类比Java中的JVM。java的开端是什么,无疑是JVM,自从有了JVM,java才能吹牛说自己是“一次编写处处运行”,不管你是windows还是linux,只要安装了对应版本的JVM都可以运行.class文件。同样Node.js的作用和JVM的一样一样的,也是js的运...原创 2018-11-02 11:06:34 · 178 阅读 · 0 评论 -
React通过redux-persist持久化数据存储
在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等。这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的...原创 2019-02-14 14:06:01 · 1874 阅读 · 0 评论