coderYYA的博客

react hooks

coderYYA — Mon, 21 Mar 2022 10:36:50 +0800

react hooks

useCallBackReducer

coderYYA — Thu, 17 Mar 2022 21:24:17 +0800

import { useEffect, useRef, useReducer } from 'react' const useCallBackReducer = (reducer, initialState) => { const [state, dispatch] = useReducer(reducer, initialState) const isUpdate = useRef() useEffect(() => { if (isUpdate.current) { /..

useCallBackState

coderYYA — Thu, 17 Mar 2022 14:42:40 +0800

useState的回调版本，在第二个参数回调函数的参数中可以获取到更新后的state，进而在函数体中做一些逻辑操作。 import { useEffect, useRef, useState } from 'react' // useState的回调版, // 可以在第二个参数=>回调函数的第一个参数nextValue中拿到更新的state值，并在函数体中执行某些逻辑操作 // setState( // (preValue) => preValue + value, //

输入框参数选定

coderYYA — Mon, 28 Feb 2022 01:26:45 +0800

Input { label: '姓名', name: 'username', value: state.username, placeholder: '请输入姓名', type: 'Input', onChange: (e) => { dispatch({ type: `change_${e.target.name}`, data: e.target.value, key: e.target.n...

VirtualizedScroll

coderYYA — Mon, 28 Feb 2022 01:21:53 +0800

/* * @Description: * @Date: 2022-02-27 22:29:33 * @LastEditTime: 2022-02-28 01:17:41 * @FilePath: \test3\src\pages\VirtualizedScroll\index.jsx */ import { InfiniteLoader, List } from 'react-virtualized' import { Spin } from 'antd' import { LoadingOut.

axios 类封装

coderYYA — Tue, 22 Feb 2022 21:52:02 +0800

JS版 import axios from 'axios' import { Loading } from 'element-ui'; class YaRequest { constructor(config) { // 实例 this.instance = axios.create(config) // 是否显示加载，默认不显示 this.showLoading = config.showLoading || fa

react input状态绑定

coderYYA — Tue, 22 Feb 2022 21:47:55 +0800

input输入框与React的state双向绑定 input 的 value事件函数绑定 this.state.info (单向流绑定) //此时输入框为read-only状态， //输入内容会报错。需要添加onChange事件函数或者添加属性 readOnly input 的 onChange事件函数传入事.

react 虚拟滚动

coderYYA — Tue, 22 Feb 2022 21:40:54 +0800

yarn addrc-virtual-list import React, { PureComponent } from 'react' import { connect } from 'react-redux' import { PlayScreen } from './style' import { PlayCircleFilled, DeleteOutlined } from '@ant-design/icons' import { changeCurrentIndexAction, r.

react 富文本编辑器

coderYYA — Tue, 22 Feb 2022 21:32:58 +0800

yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs import { Component } from 'react' import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' import { EditorState, convertToRaw, ContentState } from 'draft-js' import { Editor } from ..

react 错误边界处理

coderYYA — Tue, 22 Feb 2022 21:28:48 +0800

当后代组件生命周期（render）发生错误时，为了保证页面不会全部崩掉 state={ hasError:'' } static getDeriveStateFromError(error){ return {hasError:error} } componentDidCatch(error,info){ console.log("捕获到了错误，发送给后台") } 在渲染组件的时候判断一下 {this.state.hasError ?

网络繁忙，请稍后再试&.

react动态表单

coderYYA — Tue, 22 Feb 2022 21:26:42 +0800

AdvanceSearchForm组件 /* * @Description: * @Date: 2022-02-22 17:36:28 * @LastEditTime: 2022-02-22 21:24:53 * @FilePath: \testpull\githubreact\src\pages\AdvanceSearchForm\index.jsx */ import React, { useState } from 'react' import { Form, Row, Col, But

antd modal实例方法的获取

coderYYA — Tue, 22 Feb 2022 21:24:29 +0800

父组件 import React, { useRef } from 'react' import YaForm from './Form' import YaModal from '@/component/Modal' import { Button } from 'antd' const YaLogin = () => { const modalRef = useRef() const handleShowModal = () => { modalRef.current.show

useContext

coderYYA — Tue, 22 Feb 2022 21:22:20 +0800

useContext 共享Context 如果是路由组件的话，直接将父组件生成的context组件包裹路由 Switch 选项父组件生成 context export const UserContext = createContext() 用 UserContext 包裹需要接受数据的子组件 <子组件/> 子组件使用

react路由

coderYYA — Tue, 22 Feb 2022 21:19:45 +0800

动态路由参数 params传的参数是暴露在url中的 // 且后代路由都会接收到该参数 // 主需要先声明后注册传递参数注册声明传递参数 this.props.history.push( '/sort/'+'2' )、取值 props.match.par...

个人react笔记

coderYYA — Tue, 22 Feb 2022 21:17:36 +0800

react个人笔记