随笔分类 - react后台项目
摘要：首先我们需要了解一点，函数写法才是this.setState的原始写法，对象格式只是简洁语法格式。 （1）对象形式直接更新 如下所示初始化状态state有两个，一个是rolesList所有角色列表，另一个是roleItem选中的角色 这里注意：一个是数组，另一个是对象 当我们后期更新roleItem
阅读全文
摘要：一般来说有两种实现方式 一种是父子组件实时在进行数据传递和获取（即实时获取） 一种是在父组件点击时获取子组件数据，期间父组件并不实时收集子组件变化的数据（即点击时获取） 简述： 注意： 1、子组件调用父组件的方法：将父组件的方法以函数属性的形式传递给子组件，子组件就可以调用 2、父组件调用子组件的方
阅读全文
摘要：本节介绍下常见的md5加密技术 例如我们输入的密码为123abc，则在数据库存储时一般为加密后的字符jsakjsa45ds5dsas5sa等 （1）本质：对字符加密将其加密为32位字符； （2）概念 1、明文123abc >明文 2、密文jsakjsa45ds5dsas5sa >密文 （3）过程 将
阅读全文
摘要：这里介绍下postman测试请求API （1）测试get请求 根据请求文档API测试get请求，传参通过params传参 （2）测试post请求 通过body传参，但参数类型不同，分为文本类型和文件类型 其他为文件类型 1、文件类型 2、文本类型 .
阅读全文
摘要：本文介绍个常见问题 Antd的V3 V4版本迁移问题，将 initialValue 从字段中移到 Form 中。以避免同名字段设置 initialValue 的冲突问题： // antd v3 const Demo = ({ form: { getFieldDecorator } }) => ( <
阅读全文
摘要：概述 switch语句对一个表达式求值，将结果与 case 子语句比较，如果匹配，则从 case 处的语句向下执行。 语法 break;语句是可选择的，如果遇到break;则会跳出整个switch语句。如果没有任何case匹配，则进入到default:的分支。default:分支也是可选的。 swi
阅读全文
摘要：今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。 ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。 1.通配符传参 Route定义方式： <Route path='/path/:
阅读全文
摘要：在react中，带有html格式的内容，会保留原有的标签样式，并不能正确展示。效果相当于Vue中的v-html // 2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对; <div dangerouslySetInnerHTML
阅读全文
摘要：SPA单页应用的2种类型分页技术，常见于React、Vue等基于组件化开发的项目 1、纯前端分页 2、基于后台的分页 （1）纯前端分页 1、请求获取数据：一次性获取所有数据，翻页时不再发送请求 2、请求接口：不需要指定页面（pageNum）和每页数量（pageSize） 3、响应数据：所有数据的数组
阅读全文
摘要：reactjs是一枚新进小鲜肉，跟gulp搭配流行一段时间了。工作或者面试中经常遇到这样的问题，“子组件如何向父组件传值？”。其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父
阅读全文
摘要：问题描述： 点击修改分类按钮，出现弹框 弹框里对应显示点击操作的对应分类 但在实际使用时，表单控件无法动态修改，代码如下所示 解决方案：给表单控件添加key属性，动态key属性即可解决该问题 参考他人解释： .
阅读全文
摘要：react如果直接在点击事件里传参，则不会在触发点击时进行触发，而是在渲染时直接调用 1、直接传参 如下所示 测试后发现，该事件会在初始化时直接触发，而不是点击时触发。解决该问题方案为：箭头函数+间接调用 2、箭头函数+间接调用 此时便是在点击时触发函数调用 3、小结
阅读全文
摘要：一般对于本地初始化的项目，除了使用Mock进行模拟外，我们还可以本地搭建后台和数据库，然后结合API文档向数据库添加数据，如下所示 1、查看API文档添加请求 2、使用postman发送请求 3、接下来可以进行检查 1、直接在CMD链接数据库查询 2、使用查询API进行测试 3、使用数据库可视化工具
阅读全文
摘要：最近一直在做react项目，发现一个bug，困扰了我两天。 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your ap
阅读全文
摘要：注意： 常见的方法：开发环境阶段 在package.json添加proxy字段进行配置，该配置方案仅用于开发环境 生产环境一般需要后端工程师进行配置，如果需要前端进行配置，需要最后在工程化项目打包运行时进行配置 本质：
阅读全文
摘要：这里分享个常见的测试调试方案，相对于常用的console.log()提升了一些档次... ... 如图所示我们在react项目组件正式render之前，加了个debugger断点 接下来刷新页面如下 我们可以点击下一步继续往下执行代码 我们会看到，当执行玩openKeyPath赋值后，再往下执行时，
阅读全文
摘要：<Route exact path="/Home" component={Home}/> 1.路由组件：只有包裹在Route组件里的才能使用`this.props.location`， 2.非路由组件：假如有个需求，是面包屑或者导航组件里需要拿到`this.props.location`（导航组件或
阅读全文
摘要：个人理解： <Route exact path="/Home" component={Home}/> 1.路由组件：只有包裹在Route组件里的才能使用`this.props.location`， 2.非路由组件：假如有个需求，是面包屑或者导航组件里需要拿到`this.props.location`
阅读全文
摘要：案例结合递归+遍历实现二级导航 import React from 'react' import { Menu, Icon } from 'antd'; import './index.less'; import MenuConfig from './../../config/menuconfig'
阅读全文
浙公网安备 33010602011771号