[TOC]
### 防抖：
~~~
import debounce from 'lodash/debounce';
const _handleSearch = debounce(handleSearch, 300);
~~~
### 深拷贝
~~~
import lodash from 'lodash';
const objCopy = lodash.cloneDeep(obj);
~~~
### 获取对象部分属性
~~~javascript
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
~~~
### 获取多层对象里的值
~~~javascript
const isUpdate = get(this.props, 'location.query.action') === 'UPDATED';
~~~
### 点击复制(copy-to-clipboard)
~~~
import copy from 'copy-to-clipboard';
<Button type="primary" onClick={() => {
copy(dewValue || '');
message.success('复制成功');
}}>复制</Button>
~~~
### 再return中使用switch case
~~~
render(){
return {( ()=>{ switch(this.state.color){ case "1":return ; break; case "2":return ; break; case "3":return ; break; default:return null; } } )()}
}
~~~
### 对象数组中获取相同元素的值放在一个数组中
~~~
arrs.map(item => item.name)
~~~
### 使用color: inherit;去除a链接颜色，里面的元素颜色不变
### 同步循环
使用for-of可以实现同步调用异步请求，但是不能异步遍历对象要通过遍历对象的值来实现（Object.values(value)）
~~~
//报错
for await (const item of value) {
let temp = '';
let standardValue = '';
let key = '';
switch (value[item]) {
case '混合基金':
temp = 'blend_bond';
standardValue = '20%沪深300+80%中证全债';
key = 'BLEND';
break;
case '股票基金':
temp = 'stock';
standardValue = '沪深300';
key = 'STOCK';
break;
case '全量':
temp = 'total';
standardValue = '沪深300';
key = 'TOTAL';
break;
case '债券基金':
temp = 'pure_bond';
standardValue = '中证全债';
key = 'BOND';
break;
default:
temp = '';
standardValue = '';
key = '';
break;
}
const res = await fetchPerformance({ classicalValue: temp, managerCode, managerName, standardValue, isFullValue: '_fill_nv' });
const { incomeData = [] } = res?.result;
const val = incomeData.find(ele => ele.incomeIndex === '年化收益');
const stock = val.HS300 ? val.HS300.toFixed(2) : '';
const valueName = val.HS300 && val.HS300 && (val.manager > val.HS300 ? '跑赢' : '跑输') || '-';
datas[key] = { manager: val.manager ? (val.manager * 100).toFixed(2) : '', stock, value: valueName, standardValue };
}
//正确写法
for await (const item of Object.values(value)) {
let temp = '';
let standardValue = '';
let key = '';
switch (item) {
case '混合基金':
temp = 'blend_bond';
standardValue = '20%沪深300+80%中证全债';
key = 'BLEND';
break;
default:
temp = '';
standardValue = '';
key = '';
break;
}
const res = await fetchPerformance({ classicalValue: temp, managerCode, managerName, standardValue, isFullValue: '_fill_nv' });
const { incomeData = [] } = res?.result;
const val = incomeData.find(ele => ele.incomeIndex === '年化收益');
const stock = val.HS300 ? val.HS300.toFixed(2) : '';
const valueName = val.HS300 && val.HS300 && (val.manager > val.HS300 ? '跑赢' : '跑输') || '-';
datas[key] = { manager: val.manager ? (val.manager * 100).toFixed(2) : '', stock, value: valueName, standardValue };
}
~~~
### 中文排序localeCompare
~~~
sorter: (a, b) => {
if (a.fundManagerName && b.fundManagerName) {
return a.fundName.localeCompare(b.fundName);
}
},
~~~
### 下拉框懒加载
~~~
<Select
value={this.state.value}
placeholder="请输入关键字"
showSearch
filterOption={false}
onPopupScroll={(e)=>{
const { target } = e;
// target.scrollTop + target.offsetHeight === target.scrollHeight 判断是否滑动到底部
if( target.scrollTop + target.offsetHeight === target.scrollHeight){
// 在这里调用接口
}
}}
>
{list.map(item) => <Option key={item.id}>{item.name}</Option>}
</Select>
~~~
### lodash中的过滤(filter)
~~~
lodash.filter([],e=>{})
~~~
### lodash中数组去重(uniqBy)
~~~
lodash.uniqBy(
lodash.filter(
typeof serviceList === 'object' ? serviceList : [],
item => item.bussinessCode === this.state.bussinessCode,
),
'businessCode',
)
~~~
### 对象遍历(Object.entries)
~~~
Object.entries(
lodash.pick(
this.state,
formConfig.map(item => item.key),
),
)
~~~
### lodash中判断(some)任意元素（数组，对象，函数）经函数检查是否满足调整
~~~
const disabled = lodash.some(
Object.entries(
lodash.pick(
this.state,
formConfig.map(item => item.key),
),
).map(item => {
// 策略类型为元数据类型的时候，关联策略 code 不需要填
if (
item[0] === 'releatedStrategyCode' &&
disableRelativeStrategyCode.includes(this.state.definitionType)
) {
return true;
}
// if (
// item[0] === 'bizParam' &&
// !showNeedSelectByDefault.includes(this.state.definitionType)
// ) {
// return true;
// }
// if (
// item[0] === 'dataSourceList' &&
// !showNeedSelectByDefault.includes(this.state.definitionType)
// ) {
// return true;
// }
if (item[0] === 'needCompleteByDefault') {
return true;
}
return item[1];
}),
item => !item,
);
~~~
### js中的some判断数据中的是有有达到条件的值
~~~
检测数组中是否有元素大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
~~~
### 下拉框带搜索功能
~~~
const filterFunction = (input: string, option: any) => {
const children = option.props?.children || '';
const childrenString =
(Array.isArray(children) ? children.join('').toLowerCase() : children?.toLowerCase()) || '';
const value = option.props?.value?.toLowerCase() || '';
const lowerInput = input.toLowerCase();
return value.indexOf(lowerInput) >= 0 || childrenString.indexOf(lowerInput) >= 0;
};
export const searchAbleProps = {
showSearch: true,
filterOption: filterFunction,
};
<Select
{...searchAbleProps}
className={styles.right}
onChange={this.onSelectChange('bizParamType')}
placeholder="选择选品类型"
value={bizParamType}
>
{bizParamTypeList.map(item => (
<Option key={item.selectionId} value={item.code}>
{item.name}
</Option>
))}
</Select>
~~~
### 点击复制
~~~
"clipboard-copy": "^3.1.0",
import copy from 'clipboard-copy';
import { CopyTwoTone } from '@ant-design/icons';
{
title: '展示单元id',
key: 'id',
// width: 200,
render: ({ id }) => {
return <div style={{ fontSize: '14px' }} onClick={() => {
copy(id);
message.success('复制成功');
}}>{id || '--'}
<CopyTwoTone /></div>;
},
},
~~~
### antd 3.x 表单去除空格
~~~
<Form.Item label="描述">
{getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入描述信息！' }],
// getValueFromEvent: value => value.target.value.replace(/^\s\s*/, '').replace(/\s\s*$/, ''),
getValueFromEvent: value => value.target.value.trim(),
})(<Input disabled={detail} placeholder="请输入" />)}
</Form.Item>
~~~
### 下载表格
~~~
安装 npm install js-export-excel
import React, { Component } from 'react'
import ExportJsonExcel from 'js-export-excel';
export default class Show extends Component {
editor = () => {
const option = {};
// 文件名字
option.fileName = 'excel';
// 文件的数据集
option.datas = [
{
// 通常用来放我们的表格数据
sheetData: [
{ name: "hig girl", old: 12 },
{ name: "you boy", old: 20 },
],
// sheet名字
sheetName: 'sheet',
// 第一行
sheetHeader: ['名字', '年龄'],
//列宽 需与列顺序对应， 需要则写
// columnWidths: []
}
]
const toExcel = new ExportJsonExcel(option);
let file = toExcel.saveExcel()
}
render() {
return (
<div>
show
<button onClick={this.editor}>下载</button>
</div>
)
}
}
~~~
- 第一章 起步
- 第1节 创建react项目
- 第2节 hello world
- 第3节 数据绑定+事件处理
- 3.1 for循环事件处理中的传参写法、条件渲染
- 第4章 点击切换文字
- 第5章 使用html写react
- 第二章 运用
- 第1节 循环
- 第2节 实现一个简单的TodoList
- 第2.1节 删除
- 第3节 父子组件传参
- 1. 父组件向子组件传参
- 2. 子组件向父组件传参
- 第4节 react-router实现一个简单路由
- 第5节 生命周期
- 第6节 取数据
- 第 7节 获取dom节点
- 第8节 双向数据绑定
- 第三章 redux
- 第1节 介绍
- 第2节 安装redux
- 第3节 使用
- 3.1 action
- 3.2 使用redux实现 todolist
- 第4节封装redux中的action
- 第5节 redux-thunk中间件
- 5.1介绍
- 5.2使用
- 第四章 ant-design前端ui
- 第一节 安装
- 第2节 使用
- 2.1 ant-design实现todoList增删功能
- 第3节 使用整理
- 第五章 vue和react的比较
- 第六章 dva.js轻量级应用框架
- 第1节 介绍
- 第2节 安装dva
- 第3节 页面跳转
- 1. 事件路由跳转
- 2. 通过路由跳转
- 第4节 组件之间通信
- 1. 父组件向子组件传参
- 2. 子组件向父组件传参
- 第5节 事件处理
- 第6节 发送请求
- 1. 通过路由判断页面渲染数据
- 2. 通过事件发送请求
- 第7节 运用
- 1. TodoList
- 1.添加数据
- 1.2输入框敲回车触发事件
- 2.删除数据
- 3. 总结
- 第8节 配合antd使用
- 1. 引入antd
- 2.dva 使用antd注意事项
- 3. 知识点整理
- 第七章 dva后台项目实战
- 第1节 登录加密
- 1.具体实现
- 第2节 知识点
- 第3节 树结构
- 第八章 react新特性 hooks
- 第1节 hooks介绍
- 第2节 useState的使用
- 第3节 useEffect的使用
- 第4节 dva+antd+hooks企业后台项目开发流程
- 第 5节 hooks 使用
- 运用
- 第6节 hook整理
- 第7节 react memo
- 第九章 react中使用Echarts
- 知识点
- react中使用mobx
- 知识点
- react中使用rem
- 递归实现目录数
- react使用图表
- react 同步更新策略
- antd tree默认展开无效
- ts中lint修复篇
- React-query方案
- 高阶组件