- 博客(15)
- 收藏
- 关注
RSS订阅原创 useCallBackReducer
import { useEffect, useRef, useReducer } from 'react'const useCallBackReducer = (reducer, initialState) => { const [state, dispatch] = useReducer(reducer, initialState) const isUpdate = useRef() useEffect(() => { if (isUpdate.current) { /..
2022-03-17 21:24:17
127
原创 useCallBackState
useState的回调版本，在第二个参数回调函数的参数中可以获取到更新后的state，进而在函数体中做一些逻辑操作。import { useEffect, useRef, useState } from 'react'// useState的回调版,// 可以在第二个参数=>回调函数的第一个参数nextValue中拿到更新的state值，并在函数体中执行某些逻辑操作// setState(// (preValue) => preValue + value,//
2022-03-17 14:42:40
557
原创 输入框参数选定
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...
2022-02-28 01:26:45
337
原创 VirtualizedScroll
/* * @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.
2022-02-28 01:21:53
135
原创 axios 类封装
JS版import axios from 'axios'import { Loading } from 'element-ui';class YaRequest { constructor(config) { // 实例 this.instance = axios.create(config) // 是否显示加载，默认不显示 this.showLoading = config.showLoading || fa
2022-02-22 21:52:02
599
原创 react input状态绑定
input输入框与React的state双向绑定input 的 value事件函数 绑定 this.state.info (单向流绑定)<input type="text" value={this.state.info}> //此时输入框为read-only状态， //输入内容会报错。需要添加onChange事件函数 或者 添加属性 readOnlyinput 的 onChange事件函数传入事.
2022-02-22 21:47:55
830
原创 react 虚拟滚动
yarn addrc-virtual-listimport React, { PureComponent } from 'react'import { connect } from 'react-redux'import { PlayScreen } from './style'import { PlayCircleFilled, DeleteOutlined } from '@ant-design/icons'import { changeCurrentIndexAction, r.
2022-02-22 21:40:54
1002
原创 react 富文本编辑器
yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjsimport { Component } from 'react'import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'import { EditorState, convertToRaw, ContentState } from 'draft-js'import { Editor } from ..
2022-02-22 21:32:58
2294
原创 react 错误边界处理
当后代组件生命周期（render）发生错误时，为了保证页面不会全部崩掉 state={ hasError:'' }static getDeriveStateFromError(error){ return {hasError:error}} componentDidCatch(error,info){ console.log("捕获到了错误，发送给后台") }在渲染组件的时候判断一下{this.state.hasError ? <h3>网络繁忙，请稍后再试&.
2022-02-22 21:28:48
214
原创 react动态表单
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
2022-02-22 21:26:42
991
原创 antd modal实例方法的获取
父组件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
2022-02-22 21:24:29
759
原创 useContext
useContext 共享Context如果是路由组件的话，直接将父组件生成的context组件包裹 路由 Switch 选项父组件生成 contextexport const UserContext = createContext()用 UserContext 包裹需要接受数据的子组件<UserContext.Provider value={name:"孙悟空"}> <子组件/></UserContext.Provider>子组件使用
2022-02-22 21:22:20
101
原创 react路由
动态路由参数params传的参数是暴露在url中的 // 且后代路由都会接收到该参数 // 主需要 先声明 后注册传递参数注册声明 <Route path=' /sort/:id ' component={Sort}></Route>传递参数 this.props.history.push( '/sort/'+'2' )、取值 props.match.par...
2022-02-22 21:19:45
56
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人