react
Jay_帅小伙
这个作者很懒,什么都没留下…
展开
-
导出/下载 按钮
import React from 'react'import { Button, message } from 'antd'import moment from 'moment'export const ExportButton = (props) => { const { service, isButton = true, downText = '导出', type = "primary", download } = props const down = async ()原创 2021-10-18 14:52:51 · 266 阅读 · 0 评论 -
柱状图刻度
var lb = []var n =-0.5let arr = [0,5,10,15,20,25]for(let i=0;i<26;i++){ lb[i]= arr.indexOf(i) !== -1 ? 3 : '1' n= Number((n+0.1).toFixed(1))}console.log('lb',lb)option = { backgroundColor: new echarts.graphic.RadialGradient(0原创 2021-09-06 11:28:57 · 102 阅读 · 0 评论 -
温度计--
option = { backgroundColor: new echarts.graphic.RadialGradient(0, 0, 0.8, [ { offset: 0, color: '#7A72D6', }, { offset: 1, color: '#689bd0', }, ]), tooltip: {原创 2021-09-02 16:14:18 · 74 阅读 · 0 评论 -
react-dnd 拖拽 九宫格
依赖版本"react-dnd": "^5.0.0","react-dnd-html5-backend": "^5.0.1",//-----------------------------------import React, { Component } from 'react'import { DragDropContext, DragSource, DropTarget } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-原创 2021-08-10 14:57:19 · 707 阅读 · 0 评论 -
webpack开发配置React打包环境
WebpackDevServer提升开发效率的利器每次改完代码都需要重新打包⼀次,打开浏览器,刷新⼀次,很麻烦,我们可以安装使⽤webpackdevserver来改善这块的体验安装npm install webpack-dev-server -D配置修改package.json"scripts": { "server": "webpack-dev-server" },在webpack.config.js配置:devServer: { contentBase: "./di原创 2021-05-03 21:47:18 · 423 阅读 · 2 评论 -
react事件回调的this
react事件回调函数中注意绑定this指向,常见三种方法:1 构造函数中绑定并覆盖this.change = this.change.bind(this)2 方法定义为箭头函数change=()=>{ }3 事件中定义为箭头函数onChange = { ()=> this. change()}...原创 2020-05-14 11:43:14 · 168 阅读 · 0 评论 -
redux的基本使用方法
redux的使用//文件store/index.jsimport { creatStore } from 'redux'const counterReducer = function ( statr = 0, action ) => { switch (action.type) { case 'add': return state+1 break; case 'munus': return state原创 2020-05-10 14:57:13 · 218 阅读 · 0 评论 -
redux + react-redux使用和模块化使用
搭配上一篇redux使用//在项目入口文件import {Provider} from 'react-redux'import store from './storereactDOM.render( <Provider store={store}> </App> </Provider>)在组件里面的书写变更import {connect} from 'react-redux'@connect(state => ({num: sta原创 2020-05-10 15:33:29 · 379 阅读 · 0 评论 -
redux的异步中间件使用
//在创建store的时候import { createStore, applyMiddileware } from 'redux'import logger from 'redux-logger'import thunk from 'redux-thunk'const store = createStore(counterReducer, applyMiddileware(logger, thunk) )在组件中使用异步@connect( state => ({num: state原创 2020-05-10 16:09:40 · 100 阅读 · 0 评论 -
setState通常是异步的,因此如果要获取到最新的状态
三种方式//方式1,传递函数给setState方法this. setState((nextState,props) => ({ counter: state.counter + 1}))//1this. setState((nextState,props) => ({ counter: state.counter + 1}))//2//~~~~~~~~~~~~~~//方式2 使用定时器setTimeout(()=>{ this. change V原创 2020-05-14 11:24:21 · 557 阅读 · 0 评论 -
react router 路由守卫
import {Route,Redirect}from “react-router-dom”const PrivateRoute = ({component:Component, ...rest}) =>( <Route {...rest} render={props=>{ return isLogin ? <Component {...props}> : <Redirect原创 2020-05-13 11:36:41 · 279 阅读 · 0 评论 -
react状态管理之MobX
创建一个store.js文件import { observable, action } from 'mobx'class Store{ @observable state ={ name: 'jay' } @action changeName = ()=> { this.state = { name: 'mm' } ] }const allStore = { oneStore: new Store()}创建一个父组件 index.jsimport R原创 2020-07-02 12:23:21 · 119 阅读 · 0 评论 -
cra显目下使用装饰器
安装npm run eject npm install @babel/plugin-proposal-decorators在package.json文件的babel下配置"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ], "presets": [ "react-app" ] }...原创 2020-06-24 15:37:22 · 182 阅读 · 0 评论