React
文章平均质量分 75
在使用react框架进行开发时,会碰到各种问题,在这里记录一下心酸历程,供以后参考。也希望给碰到相同问题的麻友一个参考。
逆风飞翔的猿
闲坐亭台清酒绕,醉卧霓裳红颜笑。
展开
-
【React-admin】构建React应用(14)- 基于ant.design扩展select过滤
在使用antd的select组件的时候,由于对lable扩展或者lable的复杂化,那么在展示的时候可能有很多lable是一样的,在选择的时候无法区分。所以需要根据属性对options进行过滤。比如封装后的组件是下图这样的,那么这每一个option将会是很复杂的。用户在使用的时候可能只记住某一个属性,并且需要根据这个属性进行筛选。比如服务对象,包含服务和端口号,我需要根据协议进行过滤。那么就需要对select组件进行扩展,首先分析一下,如果你需要根据属性进行过滤,那么这个option上需要封装相关的属原创 2021-08-18 18:14:20 · 708 阅读 · 0 评论 -
Antd中tag组件删除一个导致删除多个
在做查询的时候使用tag做显示选中的多项值,如下图所示:当某一个查询字段支持多个值查询的时候,需要显示用户选择了那些查询条件。当然,需要支持用户删除已选择的某个条件值。发现:但当删除的时候,本来选择四个值,删除其中的一个会导致多删除一个,一般是删除中间的某一个,会导致同时删除两个。当通过debug的形式去查看元素的时候发现删除是一个值,剩下三个,可是在页面上却只显示两个,表单中的数据确实正常的:而打印的结果也是三个:<span>{type}:{map(names, obj =>原创 2021-07-22 15:18:16 · 1438 阅读 · 1 评论 -
【React-admin】构建React应用(13)- 基于React封装表格列设置
前言之前用过antd.pro,有好多优秀的组件可供我们快速开发,其中有个列设置也是个不错的组件,可以根据屏幕来显示合适的列,隐藏掉不是很重要的列表项,其中列设置就是干这个的。由于后期调整了框架由antd.pro更换为react-admin做权限管理,需要封装一套类似于这个列设置的组件,于是参考功能样式,做了一个简单的。2 设置列组件2.1 设计思路如果看过前面的文章,会知道之前封装过一个表格组件,其中包含数据表格,条件查询,以及分页排序功能。根据上图可以做出以下的设计思路(其中,设计到的组件有原创 2021-07-08 17:01:18 · 496 阅读 · 1 评论 -
【React】构建应用-(1)Redux的基本使用
1.前言用了React也有两年了,React也有了很大的变化,在这里就不详细说明了。我记得在之前从调研React开始,然后使用脚手架搭建了一个React的项目。好久没搞过框架的搭建了,都是拿来一些优秀的框架直接来做开发。最近在做React项目时,需要用到数据共享的模块,便想到需要使用到Redux去做数据共享。至于原理什么的我就不详细说明了,在官方文档都有说明,而且我相信一定比我写的更详细,所以就不在这里献丑了。主要是说一下怎么去使用Redux,以及在实际开发中如何打通数据流。2. Redux使用话原创 2021-04-20 18:44:03 · 193 阅读 · 0 评论 -
【React-admin】构建React应用(12)- 基于React-admin框架实现打开新TAB页面共享登陆状态
在使用React-admin框架的时候,碰到这样一个需求,也不能说是需求吧,应该是产品的共性。问题是:当我登陆之后,打开新的标签页TAB(通常是在登陆的主页面上,有些模块会在列表中加上链接,按下Ctrl和鼠标左键,会打开一个新的TAB页面),那么在新页面中应该能和上一个登陆之后的页面共享登陆状态。但是在React-admin默认使用的是sessionstorage来保存保存登陆的数据,如下是React-admin框架自带的设置登陆用户的方法:/** * 设置当前用户信息 * @param login原创 2021-04-19 11:08:53 · 1518 阅读 · 0 评论 -
【React-admin】构建React应用(11)- 基于antd的select的扩展
在使用antd的select组件时,已经不能满足我们对下拉菜单的显示需求,需要基于antd进行扩展。比如我想要实现下图的效果:我一个label就可能包含很多内容,那么对就会对label进行扩展。一般select的数据会通过ajax请求去后台请求,当数据请求回来后,需要将这些数据组装成上面的形式,就会需要对label进行特殊处理。查看官方文档可以得知label可以是个字符串也可以是个React.Element,那么只要是返回一个根节点的DOM树就可以了所以,这里会对label进行特殊处理。this原创 2021-04-08 15:23:51 · 702 阅读 · 0 评论 -
【React-admin】构建React应用(10)- 基于antd的复杂表单校验/自定义组件校验
From表单的检验是前端绕不开的话题,使用Antd的时候,其自带的表单会带有校验功能,但是在某些情况下是不能满足我们的需求的,这种情况下,我们就需要自定义一些校验。比如我要实现这种方式的校验:我需要在表单中校验这么一个组件,组件中包含了三个下拉框,需要对三个下拉框中的值进行联合校验,那么它不是简单地表单项校验,就需要额外的自己去定义这个复杂的表单项的校验。最终实现的效果应该是这样:在表单提交,或者选项值发现变化的时候,需要去自动校验是否符合规则。在Antd官网上提到了这么一种关于复杂组件的自定义原创 2021-03-25 15:52:21 · 1152 阅读 · 0 评论 -
【React-admin】构建React应用(9)-基于React-admin添加请求头
在项目中碰到这么一个需求,我应用的数据可以根据不同的中心来进行展示和处理,那么就需要在选择中心后,每次的数据操作(包括增删改查)都需要基于此中心,那么就需要每次将中心的标志id或其他参数在请求中一起发送给服务端。如果你把中心的id放在body体中,那么你需要将id每次都得分装一次放到body中,连着其他的参数发往服务端,这样做冗余量太大。而且如果切换中心,即便你将中心的相关标识存储到本地,比如localstorage中,那么你每次发送请求的时候都需要取一次,挺麻烦的。所以想办法在请求拦截的地方将参数写入原创 2021-03-17 11:07:34 · 607 阅读 · 0 评论 -
【React-admin】构建React应用(8)-antd默认样式的修改,不影响其他组件
在使用antd的时候,由于需求的时常变更或者默认样式不满足产品需求。需要我们前端人员在使用antd组件的时候需要去修改其默认组件属性。antd的大部分组件都可以通过global来去重新设置样式(注意这里使用的是less),我们常用的方式就是这样:<div styleName="root"></div>.root { height: 100%; :global { .role-table { cursor: pointer; } }}原创 2021-03-09 14:30:10 · 1581 阅读 · 0 评论 -
【React-admin】构建React应用(7)-Operator列的封装
前面提到,为了实现权限相关的需求而选择了React-admin框架,该框架已经对列做了封装,先看一下它封装的成果:import { Operator } from 'src/library/components';....{ title: '操作', dataIndex: 'operator', render: (value, record) => { const { id, name } = record; let it原创 2020-12-23 15:33:03 · 187 阅读 · 0 评论 -
【React-admin】构建React应用(6)-React中的显示隐藏
用了两年多的Reactl了,也成为了React的忠实粉丝,不负众望React也成为了时下最流行的前端框架,有点不必多说了。想吐槽的点就是React自身不带有显示隐藏功能。他不向Angular那样,通过ng-if/ng-show去控制DOM显示隐藏,在实际开发中更好的能被开发者使用。也不像Vue那样,可以通过v-if/v-show来实现这种功能。吐槽归吐槽,在实际开发中显示/隐藏这类的需求还是会时常碰到的,那怎么解决呢?讲一讲我对React显示/隐藏c从一到终是怎么用的?在最初接触React的时候,使用原创 2020-12-21 11:23:52 · 318 阅读 · 1 评论 -
【React-admin】构建React应用(4)-基于antd封装查询表单分页
1.前言之前用过antd.pro框架来实现前端开发,不管是v4还是v5都封装的不错,比如今天要说到的表格。在日常开发中,少不了增删改查,有了这些东西,就不得出现三个必要的组件表格组件查询组件分页组件而,antd.pro怎封装了一套表格组件,包含上面三个组件。至于为什么不直接把antd.pro中的表格组件直接拿来用呢?在前段时间研究微前端的时候,发现antd.pro对微前端的支持并不友好,为了以后方便管理前端项目,微前端是迟早要用的。antd.pro对微前端支持不友好的原因是:微前端在管原创 2020-12-15 19:06:52 · 3420 阅读 · 0 评论 -
【React-admin】构建React应用(3)-基于antd-tree实现联动勾选优化
上篇文章讲到如何基于antd tree组件实现联动选择,即根据增删改选中list。其中提到通过选中的节点去找到父节点,然后根据父节点key拼接_list,判断新的key是否在checkedKeys中,如果在则不添加,不在的话就需要添加。今天在做其他的需求时,发现这块不好使了,细看之下才发现,在一些情况些,比如修改个人信息操作,他有两个操作,一个是获取用户信息,一个是修改用户信息。当然当用户勾选了修改用户信息的节点,应该把获取用户信息的节点也给勾选上。他不需要list节点,用的是获取用户信息即xxxxxx_原创 2020-12-10 18:56:00 · 467 阅读 · 0 评论 -
【React-admin】构建React应用(2)-基于antd-tree实现联动勾选
1.背景最近在做基于React-admin项目的权限管理系统,所有的权限都是基于api的,即通过为角色下发的具体api来获取用户是否有对某路由可见(根据后端返回的路由表,动态生成前端菜单)以及路由下模块的操作权限(即增删改查)。在为角色分配具体的权限的时候,是通过Tree组件来进行配置的,管理员勾选用户具有某个模块下(这里的模块指的就是前端路由)的具体的某些功能,设计思路就是,只要是选择了增删改查的任一节点,则用户具有访问该路由的权限,增删改查一个都不选择的时候,用户就没有查看该路由的权限,即该路由(原创 2020-12-04 11:14:32 · 721 阅读 · 0 评论 -
【React-admin】构建React应用(1)-基于react-admin实现多个服务器代理
1. 前言我想,作为前端开发,代理是必不可少知识点。它可以解决我们本地测试与服务器联调产生的跨域问题/资源共享问题。我们知道使用nodejs时,会通过npm run start 或者yarn start的命令启动项目,会在本地起个服务。前后端分离,就会导致,前端与后端在不同的机器上,要想访问服务端代码,请求api接口,那么就需要配置代理。不管基于什么框架,配置代理都是必不可少的。如果你服务端的api接口都有固定的开头即/api或者其他的开头,但是都一样,那么你只要配置一个就可以了。但是我所开发的项目原创 2020-11-17 18:29:39 · 1602 阅读 · 0 评论 -
antd.pro中Modal中传值回调
昨天解决了一个问题,关于"怎么在解决Modal中嵌套Form表单时,表单项的校验和表单项值获取的问题",详见上一篇文章。继续在昨天的基础上做开发任务,出现了另外一个问题,在API数据流过程中,怎么数据回传的问题。我的需求是在list页面中会有弹出框Modal,然后在Modal中会嵌入一个组件(比如创建和修改组件),当创建和修改组价表单提交时,经过数据交货,API调用,最后会返回response结果,然后根据response结果来控制Modal的显示/隐藏。因为创建成功,Modal应该消失,创建失败则消失原创 2020-08-05 16:00:13 · 3913 阅读 · 0 评论 -
antd.pro中使用Modal嵌套Form实现表单的验证及表单项的值获取
antd.pro是时下很流行的React集成工具,其中包含了,react的核心代码,react路由管理,react的状态管理(dva),以及umi等适应快速开发的一套完整框架解决方案。最近接触到antd.pro,使用到Form表单的验证问题。在前端开发中必不可少的会碰到添加和修改功能。简单的添加/修改功能会在列表页list页面中定义一个Modal,或者以组件的方式创建一个CreateForm,然后在主页面引用。不管哪种方式只要是以Modal的形式展示,那就会牵扯到需要在Modal中嵌入Form表单。原创 2020-08-04 11:33:20 · 9755 阅读 · 7 评论 -
关于antd的treeselect使用
在表单中,我们可能会碰到这样的需求,比如我想将某一个物品或者资产,分配到某一个部门的员工下,那么我们需要在表单中做这样的配置:这样就会用到antd的treeselect组件,组件很好用,自带搜索框,可以大大的提高用户的可操作性。我们来看一下代码的结构:import { TreeSelect } from 'antd';const { TreeNode } = TreeSele...原创 2019-12-24 14:40:17 · 11786 阅读 · 5 评论 -
antd改变switch的值
在业务中会处理,switch的值根据某一表单项A发生变化,可以使用switch提供的checked属性<Switch checkedChildren="Enabled" unCheckedChildren="Disabled" checked={this.state.socialMediaAccount} disabled={this.state.loginBy !== "Userna...原创 2019-09-19 15:59:43 · 10607 阅读 · 0 评论 -
echarts-for-react中的stack line和line的区别
在使用echart时,碰到个小问题,从官方给出的line-chart的使用方法,自己实现的代码如下。const licenseLine = { title: { text: "" }, tooltip: { trigger: 'axis' ...原创 2020-03-03 15:12:08 · 1074 阅读 · 0 评论 -
Can't perform a React state update on an unmounted component. This is a no-op, but it indic
在使用到React时,会碰到这种问题:Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and as...原创 2019-10-17 14:31:23 · 6082 阅读 · 0 评论 -
Link和Route扥开配置时,url发生变化时,组件没有重新加载的问题
在使用react-router-dom时出现了问题,我将Link封装到一个左侧导航菜单中,然后把路由封装到另外一个组建中,在封装的时候没有注意到Router只能配置一个,导致在点击左侧导航栏时,url发生变化,并没有匹配到Route中的path,从而导致没有重新渲染组件。在最外层配置一个总的Router:import React, { Component } from 'react';...原创 2019-07-30 15:44:03 · 500 阅读 · 0 评论 -
antd.pro中表格的国际化处理
antd.pro最近更新额V5版本,于是使用了最新的版本。V5版本抛弃了dva的数据流配置方式(狗头:原因就是配置太繁琐了,你要为每个module配置module文件,并且使用generator的方式作异步请求,然后在请求service.......,),对于刚入手antd.pro的童鞋来说十分的不友好,我在接触V4版本的时候,花了两天的时间才完全打通了所有的环节。V5就相对来说简单的多了,好处的话在官网都有说明,在这里只简单的说两点。回归React的hooks函数 你所有使用usesta...原创 2020-08-21 14:20:39 · 3058 阅读 · 1 评论 -
React will try to recreate this component tree from scratch using the error boundary you provided,
使用ntd.pro提供的protable时,碰到个问题。其实是无意间碰到的,我只是修改了一个表的参数,导致整个表格用不了,错误信息指向了某个函数未定义或者不是一个函数,正常情况下是不会出现这种情况的,那多半是我们在使用的时候传递的参数不匹配导致的。第一个错误感觉无从下手,然后我饶有兴趣的看了第二个错误,"The above error occurred in the <Table> component',既然上面的错误是下面这个导致的,那么看一下下个错误就知道了。好像也是一堆看不懂的东西原创 2020-08-11 17:22:24 · 10565 阅读 · 3 评论 -
React项目webpack build时图片超过10000B时的配置
最近遇到了一个很二的问题,在react项目中使用图片,在本地server上运行没有问题,先看一下具体的代码。在项目下的src中建立了一个静态资源文件assets,里面存储着图片和css文件有了这些图片,需要在js中引入使用引入png图片import source from '../assets/images/source.png'使用img<img src={...原创 2020-01-06 16:08:35 · 548 阅读 · 1 评论 -
关于react在componentDidMount中请求之后的数据无法更新表单的问题
我们知道componentDidMount会在render函数执行之后即组件渲染之后执行。那么需要去后台准备数据的时候比如说获取list列表时,会在componentDidMount中去后台请求数据,然后更新到表单中。但是在做react项目时,碰到配置项的模块(只有一个配置页面,没有list页面以及增删页面),会出现问题。配置项一般会去检查输入的合法与否,所以我们一般会采用antd的for...原创 2019-11-22 15:58:51 · 3838 阅读 · 0 评论 -
react中做proxy代理解决options的问题
在日常的开发中,为了快速开发,一般都是前后端分离,那么在开发过程中联合调试就成了必不可少的事情了。在做react项目时,为了方便快捷的开发,一般不会将前端代码编译后再放到服务器上同后台一起调试。常用的方式就是在本地就可以直接调试对接接口,那么使用create-react-app做react快速开发下,就会出现本地起了一个服务,然后通过这个服务区访问服务器上的资源,这样就会产生跨域的问题,时如果...原创 2019-11-16 14:41:52 · 1449 阅读 · 0 评论 -
使用react-intl-universal进行组件和非组件的国际化
在做react项目时,用到了国际化。本想使用i8next等第三方国际化文件,但想了想作为react项目应该有自持的js作为国际化的支持。于是在github上搜索了一下,发现了两个:一个是react-intl,从星级可以看出是react最常用的一种国际化,最大的好处是它用props的方式注入语言包,也就是可以在不刷新页面的情况下直接更改显示的语言。但是只支持React.Component...原创 2019-11-01 16:15:03 · 5763 阅读 · 6 评论 -
react-codemirror实现log日志文件的输出
在做react项目时,碰到一个需求,需要将收集到的日志信息输入到页面上,而且高亮显示,这样方便用户/管理员查看。形似这样:本来的思路是:通过js去读取日志文件中的内容,然后将日志一行一行的输出到文本域中,然后根据指定的字符串切割,显示不同的颜色,但是考虑到左侧需要显示行号以及日志的高亮显示,这样做起来就很麻烦。于是在网上搜罗了一下发现,codemirror专门为react做了一个组件rea...原创 2019-10-28 15:05:26 · 9323 阅读 · 8 评论 -
React中使用axios来获取json文件
在项目开发中,可能需要读取本地json文件,需要将json文件放到public文件夹下才能获取到,在src中是获取不到的。形如我在src下的某个模块下,使用axios获取json文件或者其他log文件,需要将文件存放到public下这样才能获取到文件中的内容:...原创 2019-10-24 16:02:33 · 4769 阅读 · 2 评论 -
React 使用store时,无法初始化
在React使用store进行数据的发布订阅时,设置分页组件的的current和pageSize,当在当前模块中切换到第二页时,再切换到其他模块,current仍保持在第二页,没有对数据进行初始化。在reducer中的定义如下:app1:import actionTypes from '../actions/nas-clients/actionTypes';const defaul...原创 2019-10-17 15:27:20 · 635 阅读 · 0 评论 -
React-Redux 之store, action, reducer以及combineReducers(reducers)
在使用react做项目开发的时候,避免不了使用到redux,关于redux在这里不做详细赘述,大概的概念性的东西action,reducer,store最基本的三个元素都应该是清楚地,并清楚的知道他们是干嘛的。在我开发的项目中使用到redux,我就说一下怎么在react中集成redux,以及拆分多个reducer,来实现state管理。这是官方给出的redux的工作流,打个比方说,我们...原创 2019-09-11 16:11:56 · 2656 阅读 · 0 评论 -
React父子组件传值
在React的思想中,一切皆组件!我们经常将一些常用的,或者将一个复杂的页面拆分成不同组件,原本定义在同一个页面或者说同一个scope中的属性,方法就会产生跨组件的使用方式,这样就不利于我们传参。但,React提供了处理组件之间传递的属性值或者参数的方法。父子组件之间的值传递 兄弟组件之间的值传递对于父子组件传参,有两种情况父组件向子组件传参(使用props属性传值即可) 子...原创 2019-08-20 14:23:33 · 272 阅读 · 0 评论 -
基于React封装的Panle组件
React可以说是当前最火的前端框架了(官方低调的说是JS类库),相对于angularjs来说轻量不少,这也导致了,我们在处理具体的业务时会碰到很多React解决不了的东西,这时就需要第三方类库去处理。而Antd作为对React支持最好的页面渲染技术,自然而然的在React项目中广泛应用。最近在研究React+Antd的框架搭建项目时,碰到了一些问题。之前使用Bootstrap+angular...原创 2019-08-15 16:00:49 · 1390 阅读 · 0 评论 -
React 中使用antd,刷新时被选中的menu初始化的问题
在react项目中使用antd进行集成的时候,用到了menu做导航栏菜单项。根据用户的操作习惯,选中一个菜单节点的时候,刷新页面的时候应该保持用户之前的选中状态。今天恰巧碰到了这个问题,于是尝试了解决方案。查看了一下antd中menu的API,定义如下openKeys 当前展开的 SubMenu 菜单项 key 数组 string[] selectedKe...原创 2019-08-14 13:11:41 · 9251 阅读 · 2 评论 -
react router 从登录页面跳转到主页面
在搭建React框架时,选择了create-react-app脚手架工具搭建。在使用到router的时候,想法是这样的,在APP.js中配置一个简单的路由,路由包含两个,一个登录页,一个主页面。默认在加载的时候回去加载登录页,当在登录页登录成功时,在登录函数中去校验用户名密码,成功之后跳转到主页面,显示主页面的布局什么的。由于初识React,所有在摸索中总是漏洞百出,一头雾水,通过查资...原创 2019-08-07 11:27:55 · 9764 阅读 · 7 评论