react
react学习记录
山川pro
这个作者很懒,什么都没留下…
展开
-
12.mobx 6的安装与使用,启用装饰器语法
mobx6的配置及使用原创 2022-07-12 20:15:40 · 414 阅读 · 1 评论 -
11.自定义hooks
自定义hooks原创 2022-06-14 22:54:25 · 156 阅读 · 0 评论 -
10.配置react-router-v6
react-router-v6 配置原创 2022-06-14 22:47:39 · 269 阅读 · 0 评论 -
9、recoil库的基本使用
1.配置安装npm install recoilapp.js全局配置import React, { Component } from "react";import { ConfigProvider } from 'antd';import { withRouter } from "react-router-dom";import { RecoilRoot } from 'recoil';import Routes from "./router";class App extends原创 2022-04-01 16:57:02 · 1120 阅读 · 0 评论 -
8、滑动删除组件_mobile端_react
jsx/** * 滑动删除 * * children props 里面传递的盒子 * onDelete 点击删除调用props方法 * id 当前点击的唯一值 */import React from 'react';import './index.less';class SlideDelete extends React.Component { constructor(props) { super(props); this.state .原创 2022-03-16 16:26:30 · 1274 阅读 · 0 评论 -
7、高德地图(定位、复位功能)
组件jsx文件import React, { useEffect, useRef, useState } from 'react';import './index.less';import { webMercator2LngLat, getCoordinateCommon } from '@/util/transformUtil';import icon_punch_locate from '@/asset/image/informationization/afterSalesPunch/i.原创 2022-03-07 09:49:54 · 1088 阅读 · 0 评论 -
6、react-useReducer初体验、useReducer和useContext结合使用
初次体验import React, { useState, useEffect, useReducer } from 'react';export const Demo = () => { const [conut, setCount] = useReducer((state, action) => { switch (action) { case 'increment': return state + 1 cas.原创 2022-01-05 16:15:37 · 423 阅读 · 0 评论 -
5、react-useContext简单应用
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法 。主要应用场景:为不同层级的组件提供访问同样数据。创建一个共享的UserInfoContext文件userInfoContext.jsimport React from 'react'export const UserInfoContext = React.createContext(null)在顶层组件Parent.js中,传递需要共享的数据import React from 'reac原创 2022-01-05 11:11:38 · 652 阅读 · 0 评论 -
4、日期筛选组件
/** * @description: 日期筛选组件-完全不受控组件 * @param {Array} allOption 取timeUtils.js的值 * @param {String} defaultSelecType 默认选中的类型 * @param {String, String []} defaultSelectValue 日期组件默认值 * defaultSelecType为自定义时,可传; * 格式: 'YYYY-MM-DD' || ['YYYY-MM-DD', '原创 2022-01-04 10:08:46 · 532 阅读 · 0 评论 -
3、First-Hook-Demo
/* * @Date: 2021-12-16 09:47:02 * @LastEditTime: 2021-12-28 10:06:30 * @FilePath: /civ_pandawork/src/pages/pandaBigData/pandaWork/reportManagement/hourFill/hourFill.js * @Description: 工时填报 */import React, { useState, useEffect } from 'react'import s原创 2021-12-30 15:51:33 · 514 阅读 · 0 评论 -
2.react配置less
1、安装依赖库npm install [email protected] install [email protected]、弹出配置文件以便自定义项目配置npm run eject3、修改config/webpack.config.js中的配置添加样式文件正则const lessRegex = /\.(scss|less)$/;const lessModuleRegex = /\.module\.(less)$/;修改getStyleLoaders函数a.增加less-loade原创 2021-12-30 15:49:07 · 304 阅读 · 0 评论 -
1.react配置react-router 4.x(粗略版,第一次配置,需优化)
安装4.x版本路由npm install [email protected] --save创建一个异步组件AsyncComponentimport React from 'react';export default function (componentFactory) { class AsyncComponent extends React.Component { constructor(props) { super(props); this.原创 2021-12-30 15:44:33 · 356 阅读 · 0 评论