React
React
每天都要进步一点点
工作日常技术学习、积累、总结
展开
-
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
一、简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用系统参数配置的方式,暂时实现了高德地图和腾讯地图两种方式,下面我们就分别对两种地图的实现方式做一个总结。二、高德地图【a】注册高德地图开发者账号获取开发者Key高德开放平台地址:https://console.amap.com/dev/key/app选择:Web端(JS API)服务平台【b】页面引入相关JS<script t原创 2020-06-29 15:31:59 · 5693 阅读 · 2 评论 -
React图片压缩上传统一处理
一、简介最近项目需要对上传的图片文件进行压缩后才上传到服务器中,于是研究了一番,下面给出详细的压缩方法,笔者使用的是React Ant Design前端框架的Upload组件上传图片:通过查看Ant Design官网文档,在上传文件前可以修改文件:transformFile 在上传之前转换文件。支持返回一个 Promise 对象 Function(file):st...原创 2020-04-13 16:50:33 · 4663 阅读 · 0 评论 -
ES6 将数组根据某个属性进行分组的方法
一、简介最近在项目中,有需求需要将数组根据某个属性进行重新分组,然后循环遍历,于是自己写了一个分组的方法,总结如下(笔者使用的React):buildArrayGroup = (oldArray = []) => { console.log('oldArray', JSON.stringify(oldArray)); let resultArray ...原创 2019-11-12 16:24:20 · 11279 阅读 · 0 评论 -
React高阶组件学习总结
一、简介高阶组件是一个可以抽象多个组件中共同功能的一种方式,高阶组件其实就是一个函数,接受一个普通组件作为参数,然后我们经过一些处理包装,返回这个被包装的中间组件,类似于JAVA中的装饰模式。高阶组件主要有两种实现方式:a. 属性代理(Props Proxy): 高阶组件通过wrappedComponent的props来进行相关操作;b. 继承反转(Inheritance In...原创 2020-10-19 15:40:21 · 680 阅读 · 0 评论 -
【React】绑定this的5种方法总结
一、简介React中定义一个组件,可以通过ES6版本以前的React.createClass或者ES6的class xxxextends React.Component。如果使用ES6并且react版本在16以上,推荐采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件。绑定this是react中非常重要的一部分。React中,绑定this的方式...原创 2019-05-15 10:50:57 · 1659 阅读 · 0 评论 -
【React 】基于Antd Design的CheckBox多选框组件封装
一、简介基于项目需求,对Ant Design中CheckBox复选框组件进行了二次封装,主要有以下一些功能:【a】可直接使用数据库常量表的标识,使用sign标识从后台查询数据源时,以'DMK_'加上对应代码库标识,如:sign={'DMK_XTGL_WJLX'};【b】支持自定义数据源,需要遵循一定的格式,如: [{label: 'A', value: 'A'},{label: 'B'...原创 2019-03-20 16:18:44 · 7383 阅读 · 0 评论 -
【React 】基于Antd Design的RadioGroup按钮组控件封装
一、简介基于项目中大量使用到需要动态查询数据库,然后动态渲染RadioGroup组件,于是对Radio.Group进行了封装,主要有以下几点功能:【a】通过配置数据源标识,结合后端接口,可以动态查询出需要的单选按钮组数据出来,约定以'DMK_'加上对应代码库标识,如: sign={'DMK_WJCF_WJLX'},简单理解就是对应数据库中的查询标志;【b】支持自定义数据源Options...原创 2019-03-06 17:27:14 · 6494 阅读 · 0 评论 -
【React 】基于Antd Design的Switch开关选择器控件封装
一、简介最近在忙着开发十几个微服务,苦逼的我们前后端都要自己写,基于项目中有不少需要根据代码库常量来定制switch开关选择器的需求,所以抽了一点时间对ant design的开关选择器进行了二次封装,减少项目组成员的重复劳动。因为switch只有两种状态,所以事先约定好了只能对应代码库中常量值 ‘1’ 和 ‘0’ 。主要有以下一些功能:【a】可直接使用数据库常量表的标识,使用sign标...原创 2019-03-08 16:30:45 · 8354 阅读 · 0 评论 -
【React 】基于Antd Design的Upload图片墙组件封装
最近在统一UI组件库,基于项目的需求,封装了一个专门用来上传图片的控件,主要有以下一些功能:a. 可以动态配置保存的方式,可以上传到文档库、Redis缓存以及base64保存在数据库中;b. 动态配置允许上传多少张,超过限制不显示上传按钮;c. 动态配置允许上传图片的大小,超过限制大小不允许上传;d. 支持图片的预览以及删除;e. 支持在父组件中获取已上传的图片信息;f. ...原创 2018-09-14 12:26:30 · 11212 阅读 · 9 评论 -
React使用详解(学习笔记)
一、定义变量修饰符1、const:定义常量时用const name = “weishihuai”; //const表示常量,类似java的finalname = “hello weishihuai”; //编译出错,常量不能被修改,必须在定义时赋值2、var:现在一般放在方法外部使用var name ; //在方法中定义作为局部变量,在方法外定义作为全局变量name = “we...原创 2018-09-06 17:22:53 · 2193 阅读 · 0 评论