React
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
DatePicker(disabledDate)最小日期和最大日期限制
DatePicker(disabledDate)最小日期和最大日期限制原创 2022-12-09 15:29:13 · 904 阅读 · 0 评论 -
React modal自定义 openModal
React modal自定义 openModal原创 2022-12-07 16:05:37 · 540 阅读 · 0 评论 -
react useModal自定义弹窗代码
react useModal自定义弹窗代码原创 2022-12-07 10:28:43 · 697 阅读 · 0 评论 -
退款详情列表显示--纵向退款进度条显示
dom代码import { View } from "@tarojs/components"import { formatDate } from '@/utils/timeFormat'import './index.less'export default (props) => { return <View className='steps-box'> {props.list?.length && props.list.map((item, index).原创 2022-05-30 10:13:24 · 231 阅读 · 1 评论 -
useEffect使用注意事项
useEffect使用注意事项前言1、依赖项是函数如何改进?用useCallback2、依赖项是数组如何解决?useRef3、将对象作为依赖如果修复这个问题?用useMemo 的 hook前言只有当依赖关系被改变时,useEffect hook 才会触发回调函数。而且它使用浅比较法来比较 hooks 的值。1、依赖项是函数import './App.css';import { useEffect, useState } from 'react';function App() { const原创 2021-09-22 10:56:57 · 1899 阅读 · 0 评论 -
React.memo 减少React重新渲染
当父组件发生改变时,传递给子组件的props不变,子组件在相同 props 的情况下渲染相同的结果。那么子组件没必要重新渲染。通过React.memo可以提高性能import React, { useState } from 'react';function ChildComponent( props: any ) { console.log( 'child render' ); const { data: { num } } = props; return <div>原创 2021-04-07 16:07:54 · 529 阅读 · 0 评论 -
React Function实时获取输入框值:React Hook - useRef
修改输入框后,send,function 组件捕获渲染的值总是上一次send的值,如何解决这个问题export default function ProfilePage() { const [message, setMessage] = useState(''); const showMessage = () => { console.log('message: ' + message); //获取的永远是上一次send之前的值 点击前输入框的值 }; const hand原创 2021-04-07 10:07:29 · 2442 阅读 · 0 评论 -
React-高阶组件的使用说明
概念高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体而言,高阶组件是参数为组件,返回值为新组件的函数。组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。HOC 在 React 的第三方库中很常见,例如 Redux 的 connect 和 Relay 的 createFragmentContainer。举例说明常用userInfo的数据全局共享i原创 2021-04-06 12:04:08 · 212 阅读 · 0 评论 -
TypeScript常用数据类型(包含字符串,数组对象,函数,泛型等类型)
基本的TS类型用法和设置原创 2021-01-04 10:24:05 · 2214 阅读 · 0 评论 -
TypeScript枚举的运用实例
原来的写法//0:未提交,1待复核,2:已通过,3:已驳回import { Tag } from "antd";import React from "react";//0:未提交,1待复核,2:已通过,3:已驳回export default ({status}) => { switch ( status ) { case 0: return <Tag color="#108ee9">未提交</Tag>; case 1: .原创 2020-12-31 16:27:28 · 619 阅读 · 1 评论 -
React实现列表点击某一项高亮显示的实现2种思路和demo,其他语言也类似思想
实现1:选中列表的某行高亮显示,之前我的实现思路是list[index].checked = ‘高亮’实现2:设置selectKey,选中某行,就将 selectKey = index,再在渲染的列表判断item.index === selectKey 如果相等,就高亮,否则就无效果思路一、设置checkedimport React from "react";class Test extends React.Component { state = { list: [{id: 11.原创 2020-12-24 15:14:58 · 2949 阅读 · 0 评论 -
基于ant.design的FormList,通过配置生成动态列表
目前只配置了输入框和文本框,需要的可自定义添加type实现效果如图const initValues = [ {type:'input',name:'start',label:'最小值',initValue:'',}, {type:'input',name:'end',label:'最大值',initValue:'',}, {type:'text',name:'unit',label:'采购单位',initValue:'盒',rules:[]}, {type:'input',name原创 2020-12-08 09:28:57 · 4276 阅读 · 2 评论 -
react hooks 中useCallback的作用,实例讲解
useCallback如何起作用?实例讲解import React, { useState, useCallback, useEffect } from 'react';const set = new Set();export default function Parent() { const [count, setCount] = useState(1); const [val, setVal] = useState(''); const callback = useCallbac原创 2020-12-03 17:03:08 · 1239 阅读 · 3 评论 -
componentDidMount,componentWillUnmount在react hooks中如何使用?
实例 componentDidMount() { this.refreshData(); window.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { window.removeEventListener('scroll', this.handleScroll, false); }分别相当于 useEffect(()=>{ refreshDa.原创 2020-11-11 15:04:30 · 5449 阅读 · 0 评论 -
qiankun-前端微服务父项目与子项目的配置
前提,用umi建立两个项目,参考链接一、父项目1.package.json// yarn add @umijs/plugin-qiankun -D "devDependencies": { "@umijs/plugin-qiankun": "^2.7.0"}2.config.tsimport { defineConfig } from 'umi';export default defineConfig({ define: { 'process.env.apiUrl原创 2020-08-18 10:54:32 · 2553 阅读 · 0 评论 -
ant design页面切换动画
我想实现登录页面,页面之间切换,有动画效果实现代码// duration number 450 动画时间 ,// 当duration为数组是,Array[inTime,outTime],第一个参数表示显示动画过渡时间,第二个表示消失动画过渡时间,当我设置为[450,0]时,实现了无缝切换 <Button onClick={()=>{this.setState({page:'youName'})}}>点击切换</Button> <Queue原创 2020-08-06 15:34:44 · 2409 阅读 · 0 评论 -
react(ant.design)项目加载三方验证码TCaptcha.js的Demo
import React, { useState } from 'react';import Script from 'react-load-script';import { message } from "antd";const DynamicScriptExample: React.FC<{}>=()=> { const [scriptLoaded,setScriptLoaded] = useState(false); const handleScriptError原创 2020-07-24 10:07:56 · 2478 阅读 · 0 评论 -
用umi搭建项目微服务-qiankun微服务的配置
一、父项目的搭建// 1.新建项目yarn create @umijs/umi-app// 2.下载依赖yarn// 3.在packjson的devDependencies中添加qiankun依赖yarn add @umijs/plugin-qiankun --dev // 或 npm install @umijs/plugin-qiankun --save4.main/.umirc.ts中配置Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件原创 2020-07-23 09:26:09 · 5996 阅读 · 7 评论 -
antd的form表单的输入框设置不能输入空格(以电话输入框为例)
概况实现效果:当复制粘贴电话号码到输入框时,难免不小心复制一些莫名的字符到输入框,但是输入框不能识别,以下面这个str为例解决办法:getValueFromEvent问题let str = "135 3898 8889"这个str的长度是电话号码,应该是11位+2个空格,共13位。但是不知为啥,我删除了2个空格就是校验不成功,如下图分析经过分析发现,这个字符串长度是14,因为该字符串最后一位是一个未知字符。导致校验不成功解决办法(getValueFromEven..原创 2020-07-18 11:03:30 · 5673 阅读 · 0 评论 -
react hook - useEffect详解
1、不传递useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。2、传递空数组3、传递count4、传递props的对象 传递的useState返回的setter//1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行原创 2020-07-15 15:59:54 · 7170 阅读 · 1 评论 -
父组件异步传递的props,子组件更新显示
父组件import React from "react";import Component from './components/useEffect'class Test extends React.Component { state = { count:1 } changeNumber =()=>{ let {count} = this.state; count++; this.setState({ count }) .原创 2020-07-15 15:28:31 · 1181 阅读 · 0 评论 -
控制台报错:如何在组件销毁的时候将异步请求撤销
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 asynchronous tasks in the componentWillUnmount method.当我们点击组件A后,组件A需要3秒的时间才能获取原创 2020-07-10 15:08:37 · 990 阅读 · 0 评论 -
React中createContext和useContext的使用-实例
在demo中,我可以通过全局组件传递一个属性改变按钮的颜色,当父组件改变color颜色时,子组件也随之改变颜色当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染 查看原文ThemeContext.tsximpor原创 2020-07-07 10:35:37 · 2063 阅读 · 0 评论 -
react ant design自定义组件如何进行表单校验?示例
自定义组件import React, { useState } from 'react';import { Input } from 'antd';interface PriceInputProps { value?: string; onChange?: (value: {number: string | undefined; email: string | undefined}) => void;}const FormComponent: React.FC<Pric.原创 2020-07-06 12:15:21 · 1858 阅读 · 0 评论 -
react获取表单form对象的两种方式,获取form后进行重置
1.函数组件 const [form] = Form.useForm(); useEffect(() => { form.setFieldsValue({...initialValues}); }, [])return <Form form={form} onFinish={ this.onFinish } onFinishFailed={ this.onFinishFailed } .原创 2020-06-24 11:58:10 · 4377 阅读 · 4 评论 -
react ant design项目,使用umi-request实现http缓存
//'useCache'当'useCache'为true时,GET请求将在ttl毫秒内缓存。 //缓存键为“ url +参数+方法”。 useCache:false , //默认 //'ttl'缓存持续时间(毫秒),0为无穷大 ttl:60000 , //'maxCache'是要缓存的最大请求数,0表示无穷大。 maxCache:0 , // 根据http协议,GET请求用于从服务器获取数据,当服务器数据更新不频繁时,有必要缓存响应数据。 // 对于某些需要使用其他方法原创 2020-06-16 17:52:53 · 2313 阅读 · 1 评论 -
react ant.design pro项目中实现innerHTML
html中这样写<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <.原创 2020-06-05 11:05:20 · 754 阅读 · 0 评论 -
基于ant.design4.3.1实现table的编辑
实现效果如图所示import React, { useState } from "react";import { Table, Input, InputNumber } from 'antd'import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";import styles from './style.less'interface TableFromListItem { key: numb.原创 2020-06-04 17:42:29 · 967 阅读 · 0 评论 -
ant design pro中的loading.effects的作用
在异步请求是loading变量会为true,完成后会变成false,用来控制加载动画例如publicNews/fetch这个接口执行完毕后currentNewsLoading值由true,变成falseclass PublicNews extends React.Component{ render() { const {currentNewsLoading} = this.props; console.warn(currentNewsLoading) }}export.原创 2020-06-03 10:56:25 · 5986 阅读 · 1 评论 -
React ant design 表单form自定义表单控件Demo
AutoComplete,ant design form表单原创 2020-06-01 10:02:06 · 2875 阅读 · 0 评论 -
React实现将Excel文件转为html显示/转为json数据的demo
用sheetjssheetjsimport React, { PureComponent } from 'react';import { read, utils } from 'xlsx';/* list of supported file types */const SheetJSFT = [ "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "原创 2020-05-26 15:09:00 · 834 阅读 · 0 评论 -
React函数组件和类组件的相同和区别
在线测试live demo相同之处props不能改变父组件props有变化时,子组件随之而改变区别区别函数组件类组件生命周期无有this无有state无有改变stateReact.Hooks : useStatethis.setState()性能高(不用实例化)低(需要实例化)其他区别1.类组件demoimport React from 'react';class ProfilePage extends React原创 2020-05-19 10:50:54 · 5860 阅读 · 8 评论 -
React hooks - Ref 使用实例
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。useRef() ,它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式1.获取state的旧值demoimport React,{useState,useRef,useEffect} from "react";function Example () { const [count, setCo.原创 2020-05-19 10:37:26 · 12091 阅读 · 0 评论 -
基于React ant design 动态路由根据url的动态id,分别不同的页面,并设置默认跳转页面
法一获取params,然后进入“/account/company/:id”时获取到的parmas的id为“:id”,在js中判断是否为字符串":id",若是history.replace跳转到对应的"/account/company/index"页面缺点:url会出现闪跳config.ts 部分代码{ name: 'account', icon: 'user', path: '/account', routes: [ { name: 'center',.原创 2020-05-11 17:31:46 · 3451 阅读 · 0 评论 -
React.Component、React.PureComponent、React.FC的使用与区别
React.Component最常见的,最常用的包含render()React.Component 并未实现 shouldComponentUpdate()参考链接React.PureComponentReact.FCimport React, { PureComponent,Component } from 'react';class CompareCompon...原创 2020-05-07 17:38:57 · 9230 阅读 · 0 评论 -
react hooks 使用
react hooks 使用-官网链接主要解决,更新state时减少代码Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据)React.FC里可以使用一、state hook1.前提React函数组件-也成为无状态组件,他有明显的缺点,只能展示,不能改变state的值,没有this,不能读取this.state,没有生命周期state hook那么如何解决函数...原创 2020-05-07 14:16:43 · 2290 阅读 · 0 评论 -
ant design pro 无二级菜单,且进入所属二级菜单高亮显示
关键hideChildrenInMenu: 当前路由的子级在菜单中不展现,默认 false父的path要和默认显示子的path保持一致add 的path不需要’/’,作用为了,将add添加到path中,实际的path为’/user-list/add’1.route.ts目录结构2.配置{ name: 'user', icon...原创 2020-05-06 10:02:53 · 3417 阅读 · 4 评论 -
React.FC和React.ReactNode和JSX.Element和React.ReactNode的区别与使用
一、React.FCimport React, { useState } from 'react';export interface UserProps { updateModalVisible: boolean;}const User: React.FC<UserProps> = () => { let [count, setCount] = useStat...原创 2020-04-24 17:02:55 · 22690 阅读 · 0 评论 -
react源码的学习Demo我已经上传成功了,供大家参考,是免费下载的
下载链接点击我跳转到下载页面下载原创 2020-04-01 21:46:35 · 409 阅读 · 0 评论 -
React学习-事件处理绑定this和传参
事件处理绑定this的三种方式及传参方式你必须谨慎对待 JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。官网讲解链接class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 ...原创 2020-02-27 19:39:27 · 163 阅读 · 0 评论