React相关
文章平均质量分 54
React相关
waillyer
码云地址:https://gitee.com/waillyer
展开
-
前端工程化规范
第一步 安装commitizen可以局部安装npm install commitizen -D或者全局安装npm install -g commitizen,这里我推荐全局安装(可以用git cz代替git commit)。简单来说commitizen为我们提供一些cli命令比如:commitizen init、 git czhttps://github.com/commitizen/cz-cli第二步npm i lint-staged husky -Dnpm set-script prepare原创 2022-04-06 16:22:41 · 897 阅读 · 0 评论 -
react_redux_saga使用
创建项目npx create-react-app my-app创建 redux目录目录下分别创建目录reducers、actions、saga安装yarn add redux --saveyarn add react-reduxyarn add redux-thunkyarn add redux-sagaactionssrc\redux\actionsimport { USER } from "./index";// export const FETCH_USER_LIST =原创 2022-03-16 00:27:56 · 1357 阅读 · 0 评论 -
redux使用简单优化
一 目前项目使用方式:connect注入在对函数式组件可使用connect,也可使用hook是引入import { useSelector, useDispatch } from “react-redux”;import logo from './logo.svg';import './App.css';// import { connect } from "react-redux";import { useSelector, useDispatch } from "react-redux";f原创 2022-03-15 15:11:33 · 861 阅读 · 0 评论 -
antd选择日期自定义组件
组件这里写目录标题组件index.jsDateInfoChange.jsxDatePageChange.jsx使用组件index.jsimport React from 'react';import { Radio } from 'antd';import 'moment/locale/zh-cn';import moment from 'moment';import dayjs from 'dayjs';export { default as DatePageChange } fro.原创 2022-01-08 12:09:56 · 1153 阅读 · 0 评论 -
Picker 多列选择器实现省市区联动
import React, { useState, useEffect } from 'react';import { View, Picker } from '@tarojs/components';import BaseInfo from '../../services/BaseInfo';// const DEFAULT_ITEM = {// value: 0,// label: '全部',// };const AreaSelect = ({ province, ci原创 2021-12-23 14:36:29 · 1106 阅读 · 0 评论 -
react中实现拖拽排序react-dnd
import React, { useEffect, useRef, useState } from 'react';import { DndProvider } from 'react-dnd';import { Form, Card } from 'antd';import { useSelector } from 'umi';import { cloneDeep } from 'lodash';import HTML5Backend from 'react-dnd-html5-backend原创 2021-11-24 19:23:48 · 5775 阅读 · 2 评论 -
react PropTypes
Props验证使用PropTypes,React.PropTypes提供许多验证器来验证传入数据的有效性,当传入无效的数据时,JavaScript会抛出警告;为了性能考虑,React15.5.0以后React.PropTypes 和 React.createClass提取出“prop-types”库;安装prop-type:npm install --save prop-typesimport PropTypes from 'prop-types'; // ES6var PropTypes = r原创 2021-11-18 15:03:07 · 843 阅读 · 0 评论 -
组件,工具
组件,工具基于百度地图JavaScript GL版API封装的React组件库F2 移动端可视化方案Lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库基于百度地图JavaScript GL版API封装的React组件库https://lbsyun.baidu.com/solutions/reactBmapDocF2 移动端可视化方案https://f2.antv.vision/zhLodash 一个一致性、模块化、高性能的 JavaScript 实用工具库https:/原创 2021-08-31 16:34:45 · 73 阅读 · 0 评论 -
ECharts for React
这里写目录标题文档安装使用文档https://git.hust.cc/echarts-for-react/安装使用echart-for-react包,他依赖于echarts包$ npm install echarts-for-react --save或$ yarn add echarts-for-react --saveyarn add echarts --save使用import React from 'react';import { PageContainer } from '@a原创 2021-08-30 16:37:12 · 1027 阅读 · 1 评论 -
定时任务,按需开启下载
思路1、下载列表定时请求数据,首次加载组件,例如登录,开启定时任务请求2、当任务已下载执行完成后,清除定时任务3、当触发导出表格任务时,再次开启定时任务也就是在任务下载中的时候,才去执行请求调用,其他情况下避免了不必要的请求modelimport { message } from 'antd';import DownloadTasksApi from '@/services/DownloadTasks.js';import moment from 'moment';import qs f原创 2021-08-20 21:27:30 · 297 阅读 · 0 评论 -
对按钮进行防抖处理
import { debounce } from '@/utils/utils'; <Button style={{ marginLeft: 10 }} onClick={debounce(() => { const url = DownloadTasks?.DOWNLOADTASKS?.clientexp原创 2021-08-14 15:58:20 · 3745 阅读 · 0 评论 -
react配置less
一 安装npm install --save less less-loader或yarn add --save less less-loader二 配置使用npm 或者yarn 去运行 它,然后后续操作点击Y, 此操作是不可逆的 npm eject或者 yarn eject之后会出现webpack 配置, 打开你的 package.json 里面有一个三 打开配置文件 webpack.config.js修改// const cssRegex = /\.css$/;//修改前c原创 2021-08-15 18:55:22 · 74 阅读 · 0 评论 -
文件下载,post导出文件
import { saveAs } from 'file-saver'; const getBlob = (url,data) => { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.responseType =原创 2021-08-10 23:18:59 · 165 阅读 · 0 评论 -
2021-08-07
import React from 'react'import "./index.css";const getTime = () => { let dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取原创 2021-08-07 13:45:22 · 43 阅读 · 0 评论 -
react组件通信
这里写目录标题子组件获取父组件父组件获取子组件类组件中父组件获取子组件子组件获取父组件可通过props接收<ChildList parentRef={parentRef} name={name}></ChildList>父组件获取子组件useRef将ref绑定到某个子组件标签上,用以获取整个子组件的方法和参数useImperativeHandle: 可以自定义暴露给父组件的方法或者变量父组件import React, { useState, useRef } fro原创 2021-08-07 11:46:48 · 85 阅读 · 0 评论 -
react 常用hooks
这里写目录标题react hooksEffect Hookahooks自定义hooks使用自定义 Hookreact hooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useMemo ,useState,useEffect} from 'react'; const [name, setName] = useState('');Effect Hook可以让你在函原创 2021-07-01 10:47:40 · 595 阅读 · 0 评论 -
React Hooks指南
引入Hook 是 React 16.8 的新增特性,由于目前前端的 React 项目版本都高于此版本,因此可以直接在项目中使用。你也可以基于 React 提供的 hook 开发和封装更加通用和高级的自定义 hook。自定义 Hook模拟类组件生命周期useMountimport { useEffect } from 'react';const useMount = fn => { useEffect(() => { if (typeof fn === 'function'原创 2021-05-27 21:05:07 · 404 阅读 · 0 评论 -
react权限问题
hook方式在uilt目录下新建组件usePermissionIncludes.jsimport { useSelector } from 'react-redux';export default function usePermissionIncludes(permission) { const { isSuperAdmin, permissions } = useSelector(state => state.global); if (isSuperAdmin) {原创 2021-05-27 14:37:06 · 363 阅读 · 0 评论 -
Ant Design Pro 开发一个企业级中后台前端实战
Ant Design Pro 是一个企业级中后台前端Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。安装新建一个空的原创 2021-05-12 21:32:37 · 659 阅读 · 0 评论 -
react-redux使用hooks替代connect
react-redux使用hooks替代connect原创 2021-05-07 08:55:03 · 535 阅读 · 2 评论 -
umi和dva实战
Umi 介绍umi官网Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好原创 2021-05-06 15:03:27 · 1042 阅读 · 2 评论 -
react redux使用
创建项目没有环境先安装:$ npm install -g create-react-app创建项目create-react-app react-redux-ant原创 2021-05-05 15:26:23 · 332 阅读 · 1 评论 -
Picker 选择器
Picker 选择器层级选择使用Ant Design MobileAnt Design Mobile数据项const province = [ { label: "北京", value: "01", children: [ { label: "东城区", value: "01-1",原创 2021-04-28 11:51:37 · 1859 阅读 · 0 评论 -
react展开收缩实现
在组件中通过遍历,改变数据项或者组件中改变数据后,更新redux数据,从而更新组件//这里customerBaseinInfo包含newDataContacts数组,可以通过redux中updateStateProps更新数据 dispatch({ type: 'customerDetail/updateStateProps', payload: { name: 'customerBaseinInfo', .原创 2021-04-26 18:10:21 · 1148 阅读 · 0 评论 -
Taro-ui项目
一、Taro介绍简介#Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。taro官网二、安装安装时间有点慢,推荐使用yarn原创 2021-04-15 22:10:11 · 878 阅读 · 0 评论 -
react动态添加样式:style和className
一、react向元素内,动态添加style例如:有一个DIV元素, 需要动态添加一个 display:block | none 样式, 那么:二、react向元素内,动态添加className比如:1、DIV标签中,没有其他class,只需要动态添加一个.active的className,来显示内容是否被选中状态,则:此标签是否选中2、如果DIV标签本身有其他class,又要动态添加一个.active的className,来显示内容是否被选中状态,则:...原创 2021-01-21 16:37:22 · 10089 阅读 · 0 评论 -
react中img引入本地图片的2种方式
一、通过import引入(推荐)以前我们用img引入图片只需要如下即可但在react中不允许使用这种方式,会报错import logo from '../assets/images/home/logo.png' <img className={"logoStyle"} src={logo} alt=""/>二、require方法引入 <img className={"logoStyle"} src={require('../assets/images/home/logo.pn原创 2020-11-11 11:33:21 · 2963 阅读 · 0 评论 -
React购物网站项目开发
说明从无到有编写购物网站,网站参考华为官网,主要是用于学习react开发环境需要安装node.jsReact 开发环境node请自行百度安装create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。一、新建项目没有环境先安装:$ cnpm install -g create-react-app新建购物项目create-react-a原创 2020-11-10 20:31:05 · 1290 阅读 · 0 评论 -
react-typescript构建react项目
一、项目构建如果没有create-react-app命令行脚手架,可以先下载个> npm install -g create-react-app然后我们使用其创建一个typescript项目,项目名: react-typescript-emp注意> npx create-react-app react-typescript-emp --typescript npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。二、项目目录运行项目np原创 2020-08-27 11:30:50 · 919 阅读 · 0 评论 -
antd design(4.x)中的Form编辑表单
antd 3.x 版本升级到 antd 4.x 版本存在兼容移除废弃的 API移除了 Modal.xxx 的 iconType 属性,请使用 icon 替代。移除了 Form.create 方法,form 现可由 Form.useForm 获取。移除了 Form.Item 的 id 属性,请使用 htmlFor 替代。需求:从用户列表页面进入编辑页通过ID查到用户信息,回填表单(1) 跳转页面 render: (text, record, index) => ( <div&原创 2020-08-18 11:54:37 · 2756 阅读 · 0 评论 -
React 路由传参的三种方式
一、params传参刷新页面后参数不消失参数会在地址栏显示需要在Route中配置参数名称//Router.js { path: '/admin/userInfoEdit/:userId',//编辑用户 component: UserInfoEdit, title:"用户信息", icon:"UserOutlined", isShow:true },(1)传递单个参数:<Route path原创 2020-08-17 19:21:46 · 1208 阅读 · 0 评论 -
Yarn和npm命令对比
npmyarnnpm installyarn add reactnpm uninstall react --saveyarn remove reactnpm install react --save-devyarn add react --devnpm update --saveyarn upgrade原创 2020-08-17 15:41:43 · 83 阅读 · 0 评论 -
使用Ant Design中Layout布局实现一个简单的react管理后台(二)
基于上一篇进行下一步封装,主要实现分栏布局和动态路由基础搭建请看上篇使用Ant Design中Layout布局实现一个简单的react管理后台(一)(1)话不多说,开始说上篇存在的问题1. 路由太乱,我们都希望能像Vue新建路由一样,简单明了,刚开始是这样的//Router.jsconst BasicRoute = () => ( <Router> <div> <Switch> {/* <Ro原创 2020-06-12 15:45:16 · 2277 阅读 · 0 评论 -
高阶组件中的withRouter
作用高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.例如我们需要用到点击跳转当前组件不是一个Router,需要引入import { withRouter } from "react-router-dom";{adminRoutes.map(route => { return ( <Menu.Item原创 2020-06-12 14:47:54 · 566 阅读 · 0 评论 -
使用Ant Design中Layout布局实现一个简单的react管理后台(一)
一、Home.js中引入Ant Design具体可查看官网import { Layout, Menu, Breadcrumb } from 'antd';import { DesktopOutlined, PieChartOutlined, FileOutlined, TeamOutlined, UserOutlined,} from '@ant-design/icons';const { Header, Content, Footer, Sider } = Layout;原创 2020-06-11 18:07:02 · 6765 阅读 · 2 评论 -
react路由使用以及封装
第一步(安装)yarn add react-router-dom# or, if you're not using yarnnpm install react-router-dom第二步(引入)路由对应官网在目录container下新建两个文件,home.js和detail.js//home.jsimport React from 'react';export default class Home extends React.Component { render() {原创 2020-06-09 11:19:38 · 3568 阅读 · 0 评论 -
react UI组件库
博客React项目搭建与部署https://www.cnblogs.com/jackson-yqj/p/10095892.htmlAnt Design of React组件antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。地址官网地址其他组件库值得尝试的 11 个 React 组件库...原创 2020-06-09 09:44:39 · 480 阅读 · 0 评论