React
guoyu_vae
这个作者很懒,什么都没留下…
展开
-
vscode保存或者格式化文档时自动转为符合eslint的格式配置
(1)插件:1.prettier-code-formatter2.eslint3.vetur(2)配置:在setting.js中配置如下{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "explorer.confirmDelete": false, "breadcrumbs.enabled": true, "eslint.validate": [原创 2021-06-02 20:21:53 · 217 阅读 · 0 评论 -
react 父组件state改变后,通过props传到子组件时props没改变
this.setState({ Tochecked: [...packageIds], ToUnchecked: [], changeIds: [...ids], historyDiagnosis:[...historyDiagnosisChecked] , bizCategoryDiagnosis:[...bizCategoryDiagnosisListChecked] , .原创 2021-03-17 11:27:19 · 1294 阅读 · 0 评论 -
react根据路由切换页面
import * as React from 'react'import { Menu } from 'antd'import * as styles from './Aside.module.less'import { DoubleRightOutlined,DoubleLeftOutlined } from '@ant-design/icons'import routes from '../../../router'import { RouteComponentProps, withRout原创 2021-02-10 15:12:19 · 701 阅读 · 0 评论 -
react根目录下App中引用构成上左右三部分的页面
import * as React from 'react'import Header from '../Header/Header'import Aside from '../Aside/Aside'import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'import * as styles from './Layout.module.less'import { Breadcrumb, Mod原创 2021-02-10 15:08:55 · 407 阅读 · 0 评论 -
react service中index.ts暴露接口配置
import BaseApi from './BaseApi'import {ISwitchInfo} from 'src/utils/constant'const http = new BaseApi()// 查询首页核心指标统计-实时数据export const runtimeData = (data:any)=> http.request({method:'post',url:'/app/statis/runtimeData',params:data,returnAll:true}.原创 2021-02-10 14:59:37 · 1753 阅读 · 0 评论 -
react项目axios配置
baseApi.tsimport axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios'import md5 from 'js-md5'import { Modal, message } from 'antd'import CookieUtils from '../utils/CookieUtils'import { MethodType, IResponse } from '../types'impor原创 2021-02-10 14:56:47 · 661 阅读 · 0 评论 -
react 自定义打包
package.json中定义: "scripts": { "start": "node scripts/start.js", "serviceBuild": "node scripts/build.js", "test": "node scripts/test.js", "build": "node scripts/customBuild.js" },customBuild.js:/* * @Description: 自定义build执行逻辑 * @Aut原创 2021-02-10 14:44:47 · 402 阅读 · 0 评论 -
React redux的使用整理
store文件下分modules和index.ts两个文件modules中存放单独的模块文件夹,每个中存放actions.ts 和 index.ts1.actions.ts:export enum actionType { FUNCTIONS = 'FUNCTIONS',}export const updateFunctions = (value:any) => ({ type: actionType.FUNCTIONS, value,})export defa原创 2021-02-10 14:31:15 · 143 阅读 · 0 评论 -
React 前端根据筛选条件过滤数据源
handleHitKnowledgeChange = async (value: any) => { const hitKnowledgeTableFilter = this.state.hitKnowledgeTableFilter let filterTableData: any[] = [] if (this.state.hitKnowledgeTableType.includes(value)) { hitFi...原创 2021-02-01 19:01:36 · 1221 阅读 · 0 评论 -
react 递归获取树图的数据源
getTree = (tree: any[] = [], map: any[] = [], arr: any[] = []) => { console.info('tree:',tree) if (!tree.length) return [] for (let item of tree) { console.info(!map.includes(item.id)) if (map.includes...原创 2021-01-20 10:56:15 · 191 阅读 · 0 评论 -
React npm install安装后有漏包的情况
解决办法(亲测):在文件夹中删除node_modules,然后重新执行npm install (还真管用,神奇)附加一些常用的安装包的命令:1.网速慢,通过淘宝镜像方式安装包install -g cnpm --registry=https://registry.npm.taobao.org2.设置代理npm config set proxy http://xzproxy.*******.com:8080npm config set https://proxy http://.原创 2021-01-08 16:30:07 · 446 阅读 · 0 评论 -
React 给Table行添加hover样式 点击某行按钮给该行添加样式
1.antd Table中鼠标移动,给行添加hover样式 :global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td) { background: #e6f7ff; }注意:在global外面要包裹一个className,不然就是给全局的进行添加了,而不是本页面的。2.点击Table中某一行中的按钮,给该行添加样式原创 2020-12-23 16:26:23 · 1941 阅读 · 0 评论 -
git基本操作 亲测
1.从远程地址处clone一份master分支的代码git clone http://git.******.com/***/***.git2.进入到clone的文件夹中,执行git命令 git checkout -b Ft_Br20210107 remotes/origin/Ft_Br20210107解释:在本地建立一个Ft_Br20210107(名字任意起)的分支并在本地切换到该分支,该分支用来追踪远程的Ft_Br20210107(远程git上的分支,名称是固定的)分支。然后就可以在该原创 2020-12-18 15:09:43 · 92 阅读 · 0 评论 -
axios.then 还需要async 和await 吗
1.如果目的只是调用一个接口进行数据处理的话是不需要的,直接已这种方式调用即可。statisZanCaiExport({ statisDate: this.state.datePickValue.format('YYYYMMDD') }).then(res =>{ const url = window.URL.createObjectURL(new Blob([res], { type: 'application/octet-stream;charset=utf-原创 2020-12-17 15:06:08 · 2010 阅读 · 0 评论 -
接口请求附件信息 上传文档和下载文档
上传: export const add=(params: any) => http.request({ method: 'post', url: '/app/helpcenter/add', params, config: { headers: { 'Content-Type': 'multipart/form-data' } } })下载:export const statisZanCaiExport = (data:any)=> http.request({method:'pos.原创 2020-12-28 20:06:26 · 512 阅读 · 0 评论 -
react项目使用less样式的配置
react 中支持less样式时,需要配置文件:typed-css-modules.d.tsdeclare module '*.less' { const content: any export = content}原创 2020-11-27 17:50:47 · 397 阅读 · 0 评论 -
取数组中的第一个值
const [arr]=[1,2,3,4]结果: arr=1原创 2020-11-27 10:06:27 · 3763 阅读 · 0 评论 -
点击按钮进行文本一键赋值
copy = (response: string) => { let transfer = document.createElement('input') document.body.appendChild(transfer) transfer.value = response transfer.focus() transfer.select() if (document.execCommand(...原创 2020-10-28 10:53:52 · 268 阅读 · 0 评论 -
React Table中某一列名称太长,需要截取的处理方式
关键: ellipsis:true, render: (text, record) => ( <div title={record.kdName} className="ellipsis"> {!!record.kdName ? record.kdName : '-'} </div>这种方式解决了给div添加固定的宽度,在另写css样式进行截取。...原创 2020-10-23 11:50:01 · 411 阅读 · 0 评论 -
antd Modal中添加Form表单,数据回填时通过ref方式第一次打开页面时current是null 的解决方式
我希望网上的方法有效在放到网上,没效果浪费大家的时间,取不到原因不说了,解决方案:Modal的API中有一个强制渲染的属性 forceRender={true}第一次取就可以取到了,只是会把渲染的先隐藏起来,可能会浪费些渲染性能。性能这块不是我们目前首先考虑的问题。...原创 2020-09-22 17:10:51 · 3113 阅读 · 2 评论 -
antd Table 调整行高 取消每隔右侧的竖线,只保留外边框线
<Table bordered className={styles.rowStyle} />.rowStyle{ :global{ .ant-table-tbody > tr >td { padding: 10px 24px !important; } .ant-table-thead > tr >th{ padding: 10p..原创 2020-09-15 14:49:56 · 4494 阅读 · 4 评论 -
字符串中添加<br />换行没效果问题
有时我们希望在类似tooltip中添加提示信息,需要在文本中添加换行<br/>,但没效果。原因就是<br/>是标签,在显示到浏览器中没有当做标签,作为文本处理了。解决方案:<div dangerouslySetInnerHTML={{__html:tooltip}}/>tooltip:含有<br/>换行的提示文本...原创 2020-09-07 17:49:03 · 8880 阅读 · 0 评论 -
React 给数字添加精度和分隔符
function formatNumber(num:string | number,decimal:number=0):string{ num=String(num) if(num==='' || num==='0') return num const arr=num.split('.') const integerPart:string=arr[0] const decimalPart:string=arr[1] || '' const len=intege原创 2020-08-18 20:21:03 · 787 阅读 · 0 评论 -
React echarts 雷达图封装
import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/radar'; interface IProps { echartId: string, data: ISeriesData, chartOptions?: IEcharts, max: number}interface IEcharts { [key: string]: .原创 2020-08-14 16:18:28 · 486 阅读 · 0 评论 -
React echarts 折线图封装
import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/line'; interface IProps { echartId: string, data: ISeriesData, chartOptions?: IEcharts, gradients: boolean,}interface IEcharts { [key: s.原创 2020-08-14 16:05:14 · 670 阅读 · 0 评论 -
React Card 卡片和遮罩层的设置
import * as React from 'react'import { Card, Checkbox } from 'antd';import * as styles from './SubscribeCard.module.less'class SubscribeCard extends React.Component { state={ maskHidden:true } maskOnMouseEnter=(e:any)=>{ .原创 2020-08-13 10:53:53 · 1804 阅读 · 1 评论 -
React 重写AntD组件之global
在我使用antd等组件时,常常需要更改组件的默认样式,这时候,我们就需要用:global{}将需要修改的样式包裹起来。这种情况,我遇到过很多次,但是从来没有探究过原因,今天就浅浅的说一下我的理解。在说这个问题之前,我们需要先知道CSS Modules。CSS Modules主要是实现局部作用域和模块依赖两个功能。我们主要了解第一个功能就好。局部作用域我们都知道,CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会原创 2020-08-11 11:15:21 · 4165 阅读 · 0 评论 -
React 基础学习
可以把函数从父组件通过Props属性传给子组件,让子组件执行类似点击事件时执行父组件的方法。父组件: <ChooseProduct showDialog={showDialog} handleCancel={this.handleCancel} /> handleCancel = (sign:string)=>{ this.setState({ [sign]:false }) }子组件:原创 2020-08-11 10:23:53 · 95 阅读 · 0 评论