![](https://img-blog.csdnimg.cn/dcf323ee1fa84f04b69bdc5e5883957e.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
文章平均质量分 53
react相关
六卿
冰冻三尺非一日之寒,愿你事事看开,唯独对美好保持执念。
展开
-
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等原创 2024-04-17 16:35:54 · 655 阅读 · 0 评论 -
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)原创 2024-04-12 11:38:09 · 367 阅读 · 0 评论 -
在react项目中实现按钮权限createContext && useContext
首先,这里是使用Context来实现的,我们知道Context可以实现值传递给子孙组件,我们可以利用这个特性来实现,当然实现按钮权限级别的方法是有很多的,我这里只是在自己小项目中使用到了,所以简单总结一下,方便之后使用或者分享给大家。也可以配合上面的useRecuder来实现孙组件更新父组件中state中的状态,只要孙组件拿到父组件中的dispatch就可以出发action,使父组件重新render。在子组件或者孙组件中使用useContext这个hook来接收来自父组件中的数据;原创 2024-03-21 10:01:42 · 663 阅读 · 0 评论 -
react中使用Modal.confirm数据不更新的问题解决
react中使用Modal.confirm数据不更新的问题解决原创 2023-09-05 14:54:14 · 1898 阅读 · 1 评论 -
Blob格式转json格式,拿到后端返回的json数据
Blob格式转json格式,拿到后端返回的json数据原创 2023-05-23 10:56:44 · 3529 阅读 · 1 评论 -
前端diff文件对比使用worker进行优化
前端diff文件对比使用worker进行优化原创 2022-06-21 17:44:10 · 1132 阅读 · 0 评论 -
antd_使用Input封装实现Form校验效果(最终版)
antd_使用Input封装实现Form校验效果(最终版)原创 2022-05-16 17:10:21 · 2674 阅读 · 4 评论 -
antd_使用Input封装实现Form校验效果
antd_使用Input封装实现Form校验效果原创 2022-05-12 14:02:54 · 1108 阅读 · 2 评论 -
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符原创 2022-04-15 16:35:14 · 1059 阅读 · 2 评论 -
react字符串转为dom标签,类似于Vue中的v-html
react字符串转为dom标签,类似于Vue中的v-html原创 2022-04-12 17:46:18 · 1744 阅读 · 0 评论 -
React中使用worker线程
React中使用worker线程原创 2022-04-11 20:26:06 · 2812 阅读 · 1 评论 -
React_函数式Hooks和Class比较优缺点
React_函数式Hooks和Class比较优缺点原创 2022-03-23 15:22:18 · 3297 阅读 · 3 评论 -
Hooks中使用useReducer实现表单数据的提交,解决多次使用useState的问题
Hooks中使用useReducer实现表单数据的提交,解决多次使用useState的问题原创 2022-03-21 14:31:20 · 1597 阅读 · 2 评论 -
Hooks使用useReducer、createContext 、useContext实现模块数据共享,类似全局状态管理但不推荐做全局管理
Hooks使用useReducer、createContext 、useContext实现模块数据共享,类似全局状态管理但不推荐做全局管理原创 2022-03-15 18:20:34 · 2538 阅读 · 2 评论 -
Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能原创 2022-03-13 10:11:20 · 2250 阅读 · 7 评论 -
hooks实现左添右减
react_hooks实现左右添加删除小dome原创 2022-03-07 11:28:06 · 615 阅读 · 0 评论 -
antd table合并行或者列(动态添加合并行、列)
antd table合并行或者列(动态添加合并行、列)原创 2022-02-25 13:16:40 · 12268 阅读 · 9 评论 -
this.props.history.listen路由监听与取消监听
this.props.history.listen路由监听与取消监听原创 2022-02-21 14:22:18 · 2514 阅读 · 0 评论 -
React实现添加多行输入框(点击一行增加一行)
有时候我们会碰到例如批量增加账号密码的需求,点击加一按钮,再出现一组账号密码的弹框。如何实现呢?首先,有多组,是个不确定向,可能只添加了一组,但是也有可能连续添加七八组。所以肯定是一个变量在控制显示多少个,肯定是循环出来的,每点击一次,这个长度增加1,列表循环出来的页面输入框加1。原创 2022-02-18 09:11:05 · 4343 阅读 · 8 评论 -
React页面跳转取消上一个页面的所有请求
React页面跳转取消上一个页面的所有请求原创 2022-02-15 17:24:05 · 3231 阅读 · 0 评论 -
React使用antd实现可编辑单元格
React使用antd实现可编辑单元格原创 2022-02-09 11:48:33 · 4045 阅读 · 9 评论 -
React配合axios请求拦截校验session,403跳转至登陆页面
这个在Vue中很简单的就解决了,直接引入router,然后router.push,但是在React中,我们要使用props.history.push进行跳转,但是怎么在axios.js中拿到props呢?又是个问题。原创 2022-01-19 10:56:43 · 7125 阅读 · 2 评论 -
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
比如说我有一组和二组。一组的界面和二组的界面一样,就是数据不一样。当我从一组切换成为二组之后,全部的接口需要重新请求接口儿。但是我不想让整个页面刷新请求(window.location.reload()),而是切换组之后直接全部变成新的数据,这个怎么实现?原创 2022-01-13 09:52:03 · 551 阅读 · 0 评论 -
react项目配合diff实现文件对比差异功能
react项目配合diff实现文件对比差异功能原创 2022-01-07 17:14:19 · 4123 阅读 · 12 评论 -
React按需加载antd步骤以及出现的问题
React按需加载antd步骤以及出现的问题原创 2021-12-30 09:57:58 · 741 阅读 · 6 评论 -
react使用antd中的Checkbox实现多选
react使用antd中的Checkbox实现多选原创 2021-12-28 10:59:12 · 6667 阅读 · 10 评论 -
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
历史原因,在 beforeUpload 返回 false 时,会返回 File 对象。在下个大版本我们会统一返回 { originFileObj: File } 对象。当前版本已经兼容所有场景下 info.file.originFileObj 获取原 File 写法。你可以提前切换。原创 2021-12-20 17:29:38 · 4749 阅读 · 3 评论 -
antd中table组件选中单行换样式(比如背景颜色)
今天项目中有一个需求,点击某一行后,将改行的背景颜色换掉,换成一个比较醒目的颜色。首先看了看官方,官方还是比较可爱可亲的,都给我们准备好了,原创 2021-12-14 18:11:01 · 7881 阅读 · 7 评论 -
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
昨天学习了useMemo的使用,我们知道useMemo起到了缓存变量的作用。而useCallback的作用起到了缓存函数的作用。下面我们来看一下怎么使用以及注意事项。原创 2021-12-09 17:52:00 · 1381 阅读 · 5 评论 -
React中函数式Hooks之useMemo的使用
React.useMemo的用法和作用原创 2021-12-08 15:48:09 · 1826 阅读 · 2 评论 -
React处理错误边界钩子getDerivedStateFromError
getDerivedStateFromError处理子组件报错原创 2021-12-06 18:48:28 · 3791 阅读 · 5 评论 -
针对react-captcha-code第三方插件不能每次触发深颜色的处理
针对react-captcha-code第三方插件不能每次触发深颜色的处理:react-captcha-code npm地址https://www.npmjs.com/package/react-captcha-code/v/1.0.4在node_modules中找到这个第三方依赖包:将之改造成class组件:MyCaptcha.js验证码组件:/** * * 原本使用react-captcha-code 这个第三方插件 但是会生成浅色字符验证码 * * 只针对颜色进行了原创 2021-11-30 16:07:04 · 1239 阅读 · 0 评论 -
React属性之context属性
定义:例子:import React from 'react'let MyContext = React.createContext()class Grand extends React.Component { static contextType = MyContext render() { const { username, age } = this.context return ( <div style={原创 2021-11-29 13:50:06 · 565 阅读 · 1 评论 -
React中Fragment标签和空标签的使用
Fragment作用:类似于vue中的template标签,将当前dom不渲染后页面。在多层循环中可以添加key属性,其他属性不可以添加。不然会警告,提示只能有key属性和children vdom使用:import React,{Fragment} from 'react'import { Button } from 'antd'export default function Key(){ let myRef = React.useRef() const alertFun原创 2021-11-29 09:38:15 · 1654 阅读 · 0 评论 -
React中函数式Hooks之useRef的使用
useRef的基本使用import React from 'react'import { Button } from 'antd'export default function Key(){ let myRef = React.useRef() const alertFun = ()=>{ alert(myRef.current.value) } return ( <div> <inpu原创 2021-11-29 09:26:18 · 851 阅读 · 0 评论 -
React中函数式Hooks之useEffect的使用
useEffectuseEffect总的来讲,是为了模拟class类组件的生命周期,同时也完成了一项功能,那就是数据的监听:最下方有总结我们首先看第一个例子:import React from 'react'function Dome() { let [num, setNum] = React.useState(0) React.useEffect(()=>{ console.log("num的数值为:"+num) }) const ch原创 2021-11-26 15:04:40 · 2614 阅读 · 3 评论 -
React中函数式Hooks之useState的使用
useState首先不同于class组件这个组件中没有this/* * @Descripttion: * @version: * @Author: ZhangJunQing * @Date: 2021-11-11 11:12:01 * @LastEditors: ZhangJunQing * @LastEditTime: 2021-11-26 11:17:06 */import React from 'react'function Demo() { //useState原创 2021-11-26 11:21:15 · 1065 阅读 · 3 评论 -
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
一次性加载太多的路由文件会使首次加载的速度很慢,所以我们需要将路由搞成懒加载的形式,用到哪个组件加载哪个组件。庆幸的是React官方已经给我们准备好了插件,也在React库中:首先 从react这个库中导出lazy、Suspense这两个方法和组件。import React,{Suspense,lazy} from 'react';router之前的引入方式import ZoneManageAll from "../pages/zoneConf/zoneManageAll";懒加载的引入当.原创 2021-11-26 10:23:14 · 2127 阅读 · 1 评论 -
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
为了实现这个组件全局可以使用并且路径唯一,我们使用路径别名。配置路径别名:如果项目中没有config/webpack.config.js文件,我们可以package.json中scripts中这个命令:"eject": "react-scripts eject"npm run eject将webpack文件暴露出来。打开config/webpack.config.js文件: alias: { // Support React Native Web //原创 2021-11-12 18:09:27 · 2167 阅读 · 5 评论 -
React读取properties配置文件转化为json对象并使用在url地址中
首先properties配置文件的格式是:url=http://192.168.0.6port=8081我这里命名是strings.properties,因为要做到可配置,就是后期只是改变这个文件的url和port而不用重新打包前端代码,这个文件我放到了public下面然后每个接口请求其实都需要拿到这个文件里面的配置包括url和port;所以选择读取文件,读取文件是异步操作所以在封装请求方法的时候,出现了问题,可以打印出来读取的内容,但是暴露出去的对象是一个undefined;首先,先读取到原创 2021-11-10 11:47:42 · 3222 阅读 · 5 评论