![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
骜然
前端小白成长记
展开
-
React新版本中ref使用方法
博主使用的React版本为"react": "17.0.1"新版需要先在组件内创建refrefName = React.createRef() //refs新版创建方法,调用直接this.refName调用演示//将ref挂载给相应组件<PicturesWall ref={this.refName } />//在需要的地方调用该refthis.refName 调用组件方法this.refName.current.getFuncName() //调用子组件ref对应的方法原创 2021-02-14 00:45:29 · 621 阅读 · 0 评论 -
antd表单组件报错 Cannot read property ‘setFieldsValue‘ of null
今天在用React的UI库Antd 4.x版本 里的表单和表格配合写一个修改的需求,由于每次点击修改要拿到原来的值,所以需要用到表单的一些Api表单设置值的API//表单<Form ref={this.formRef}> <Item name="categoryName" label="分类名" hasFeedback rules={[{ required: true, message: '分类名不可以为空!' }]}> &l原创 2021-02-06 19:46:07 · 6236 阅读 · 2 评论 -
React水印插件
由于最近项目需求,所以研究了一下水印插件,认为这个不错,分享给大家!安装npm i water-mark-oc --save使用//CommonUtil.cookiesOrgFunc() 是登录的用户单位名称,从登录成功返回的信息中拿到的//CommonUtil.getCookiesName 是登录的用户名称,从登录成功返回的信息中拿到的 componentDidMount() { setTimeout(() => { watermark({原创 2021-01-29 14:19:23 · 595 阅读 · 0 评论 -
React富文本框插件 —— braft-editor富文本编辑器使用简介与项目实战
前言 —— 由于公司react项目中需要一个富文本框,所以这几天特意在网上找了一个react可以用的富文本框插件,该插件还是比较实用的功能比较多,使用起来也比较简单插件名:braft-editor富文本编辑器安装:使用npm安装npm install braft-editor --save使用yarn安装yarn add braft-editor示例代码:import React from 'react'// 引入编辑器组件import BraftEditor from 'braft-e原创 2020-12-04 12:22:07 · 4974 阅读 · 1 评论 -
React常见报错 —— 附解决方法
报错原因: 在组件卸载前有未清理的定时器或者其他未清理解决方案: 在生命周期函数中 componentWillUnmount清理掉componentWillUnmount() { clearInterval(要清理的定时器)}原创 2020-11-26 22:01:03 · 783 阅读 · 0 评论 -
Warning: Can‘t perform a React state update on an unmounted component.React内存泄漏报错解决
在React开发中切换组件或者退出登录时偶尔会遇到控制台如下报错,不会有大影响仅控制台报红原因:报错直译:我们不能在组件销毁后设置state,防止出现内存泄漏的情况关于react中切换路由时报以上错误,实际的原因是因为在组件挂载(mounted)之后进行了异步操作,如ajax请求或者设置了定时器等,而你在callback中进行了setState操作。当你切换路由时,组件已经被卸载(unmounted)了,此时异步操作中callback还在执行,因此setState没有得到值。解决方案: // 适原创 2020-11-24 23:09:00 · 754 阅读 · 0 评论 -
TypeError: Cannot read property ‘location‘ of undefined 报错解决办法
react中使用路由报错TypeError: Cannot read property 'location' of undefined报错代码为// 经过测试是 <Router> 的问题,换成 <HashRouter> 就不报错了import { Router, Route, Switch, Redirect } from 'react-router-dom'import Login from './components/login/index'import Adm原创 2020-11-21 22:39:26 · 14773 阅读 · 2 评论 -
react实战笔记 —— 无限循环滚动列表实例
一个比较实用的实例,自上而下循环无缝滚动首先创建一个带有id的元素,id要加给需要滚动的元素// 在react中元素要写到render中render() {//data是上级元素传过来的所以需要对象解构出来。let {data} = this.props; this.scrollRow = 1; return ( <div className={s.container}> // id要加给需要滚动的元素,也就是原创 2020-11-20 23:14:47 · 3030 阅读 · 1 评论 -
ES6 —— 修饰器(decorator)的基本使用与实例
作用:修饰器用于简化高阶函数/高阶组件安装:npm install --save-dev @babel/plugin-proposal-decoratorsnpm i react-app-rewired -Dnpm i customize-cra -D新建js文件 config-overrides.js:// config-overrides.js (react脚手架的自定义配置文件) const {override,addDecoratorsLegacy,disableEsLint,原创 2020-11-09 22:55:48 · 661 阅读 · 0 评论