React
文章平均质量分 70
React
成续源
这个作者很懒,什么都没留下…
展开
-
使用Antd和Express实现文件的上传功能
文章目录前言使用Nodejs的Express框架实现文件上传后端功能使用Postman测试文件上传功能使用Antd的Upload组件实现文件上传前端功能前言根据公司需求,前端网页上传excel文件,后端接收文件并解析。采用Antd的Upload组件实现前端功能,由于上传文件不好用mock进行测试,临时编写一个node程序测试后端功能。使用Nodejs的Express框架实现文件上传后端功能使用Express框架,关键是使用multer包来实现文件上传功能 "dependencies": {原创 2021-09-14 10:41:29 · 1117 阅读 · 0 评论 -
React结合ECharts实现温度计组件
文章目录需求分析实现效果npm版本和参考demo实现步骤温度计湿度计需求分析项目需要在监控主页动态监视房间内的温度和湿度,业主希望使用不同的颜色来区分不同的温湿度范围,其中温度范围-20℃ ~ 50℃,湿度范围0RH% ~ 100RH%。实现效果最终效果如下图所示:其中温度范围渐变色从蓝色到红色,湿度范围渐变色从绿色到蓝色npm版本和参考demo项目采用Ant Design Pro V 2.0开发,所用的package版本如下:npm版本如下: "antd": "^3.26.18"原创 2020-08-10 14:24:54 · 1646 阅读 · 1 评论 -
使用Promise避免回调地狱
文章目录提出问题Promise简介Promise基本用法解决问题提出问题在前端开发过程中,经常碰到以下情况:调用A方法获取B方法的参数a,调用B方法获取C方法的参数b,最终调用C服方法获取要在Web页面显示的真实数据,如下: // 回调地狱 componentDidMount() { getStudentInfo('zhangyun').then(studentInfo => { console.log(studentInfo);原创 2021-01-19 17:17:44 · 566 阅读 · 0 评论 -
React Hooks学习笔记(一) -简介
React Hooks简介在React 16.8中引入了React Hooks概念,之前state只能在类组件中定义,有了Hooks后,可以在函数组件中使用state以及其它React特性。Hooks 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲,React 组件一直更像是函数。而 Hooks 则拥抱了函数,同时也没有牺牲 React 的精神原则。Hooks 是一些可以让你在函数组件里“钩入” React State 及生命周期等特性的函数。Hooks 不能在 clas原创 2020-11-26 09:22:04 · 163 阅读 · 0 评论 -
React Context用法整理(附完整代码)
文章目录前言知识点汇总场景1:使用`Provider`和`Consumer`生产和消费数据文件目录及说明代码文件效果场景2:使用`ContextType`接收数据文件目录及说明代码文件效果场景3:动态和静态Context代码文件效果场景4:在嵌套组件中更新Context代码文件效果场景5:消费多个Context代码文件效果前言g yue h传统的React应用中,数据通过props属性自上而下(由父组件向子组件)传递,当组件层级数量增多时,在每一层传递props则很繁琐,Context提供了一种新的组件原创 2020-11-18 16:53:14 · 10702 阅读 · 2 评论 -
react生命周期函数componentWillReceiveProps(通过比较先后传递的props刷新组件)
componentWillReceiveProps这个生命周期函数用的不多,碰到正好总结下。该函数通过比较先后两次传入的props数值是否相同,执行相应的方法。如代码所示,比较前一次传入的type, historyData和现在的是否相同,决定是否如何填充echarts options componentWillReceiveProps(nextProps) { const { t...原创 2020-05-06 14:05:00 · 1805 阅读 · 0 评论 -
react中定时刷新echarts图表
文章目录实现效果关键问题实现过程相关思考实现效果Ant Design结合React定时获取数据并刷新echarts图表,实现效果如下:关键问题在componentWillMount中设置定时器定时获取数值,在componentWillUnmount中删除定时器使用echarts-for-react构建echarts图表,数据刷新时填充新的数值到echarts option中,随后获取...原创 2020-05-06 13:58:57 · 1701 阅读 · 0 评论 -
react中axios结合后端实现GET和POST请求
文章目录get实现方式1(参数直接在url中)get时间方式2(作为JSONString跟在url末尾)post实现(传递JSONObject)区别在这里不做介绍了,POST方法比GET方法稍微安全一点,GET方法比POST方法要快一些,个人感觉传递单个参数用GET,传递多个参数用POST。get实现方式1(参数直接在url中)前端export function getAllSubstat...原创 2020-03-23 13:56:11 · 4665 阅读 · 0 评论 -
ES6返回JSX的两种方式
文章目录方式1:直接返回(注意圆括号内包含JSX表达式)方式2:返回一个数组工作中遇到根据条件判断返回JSX的情况,做个小结方式1:直接返回(注意圆括号内包含JSX表达式)return ( <MonthPicker className={styles.element} format='YYYY-MM' placeholder='请选择月份' onC...原创 2020-02-25 14:33:16 · 1055 阅读 · 0 评论 -
React新生命周期函数getDerivedStateFromProps结合定时器更新组件数据
文章目录新生命周期函数getDerivedStateFromProps实现目标相关代码父组件子组件总结新生命周期函数getDerivedStateFromPropsreact 16.3后更新了生命周期函数,不建议使用原来的componentWillReceiveProps、componentWillUpdate、componentWillMount,增加了getDerivedStateFro...原创 2020-02-15 23:51:35 · 1272 阅读 · 0 评论 -
antd父组件获取子组件表单的值
文章目录实现功能组件关系基本思路父组件中关键代码子组件中关键代码完整代码父组件AccountManage.js子组件AccountRoleSearchBar.js子组件UserMainForm.js实现功能编写用户管理模块前端界面,实现用户的增加、查询、删除、更新操作,为了体现React模块的复用性,拆分为1个父组件和2个子组件,整体效果如下:整体页面:新增和编辑用户弹出窗UserMai...原创 2020-02-08 19:47:03 · 2471 阅读 · 0 评论 -
React绑定事件处理函数的3种方式
文章目录React绑定事件处理函数的3种方式constructor中绑定使用类的成员字段定义语法(比较常用)通过一个箭头函数将真实的事件处理函数包装一下(最简练)React绑定事件处理函数的3种方式看react官网提到绑定事件处理函数,研究了下有3种方式,做个总结如下:constructor中绑定在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定,注意:Re...原创 2019-03-11 15:49:16 · 2010 阅读 · 0 评论 -
React组件渲染后对DOM的操作示例
文章目录在React.js中基本不需要对DOM进行操作,可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面数据更新的效果。但是有的时候需要组件渲染完后对DOM进行一些操作,比如表单提交后对其中的<input>中的内容进行清空,重新定义鼠标焦点,下面以1个简单的例子进行说明。先看下显示效果:在上例中,组件渲染结束后,清...原创 2019-03-14 10:52:03 · 7478 阅读 · 0 评论