Welkin_qing的博客

转化为selectListimport {import {import {import {import {!item ,);return arr;转化为对象import {import {} });return {下载文件/*** 下载文件/*** 获取文件名称]+\\.[^\\.;]+);if(!return!判断请求类型import {import {import {import {

文章目录一、antd3上传图片二、antd4上传文件三、使用antdPro之前一直在使用antd上传文件，图片，从antd3到antd4再到antdPro，总结一下经验吧一、antd3上传图片这里用的antd的版本是"antd": "^3.25.0",import React, { FC, forwardRef, useState, memo } from 'react';import { Button, Icon, Upload as AntdUpload, Spin } from 'antd'

文章目录ProFormDependency（1）实现重复密码校验1. bootstrap实现密码校验2. antd ProComponents 实现密码2. 通过ProFormDependency控制表单项是否显示（2）ProFormDependency 的name值1. 为数组时最近一直在使用antdPro，发现ProFormDependency这个组件实现数据联动很好使用，于是记录一下：ProFormDependency详情：https://procomponents.ant.design/com

文章目录一、npm发包需要了解的知识（1）判断包名是否合法（2）npm初始化（3）devDependencies、dependencies和peerDependencies二、测试发包三、使用react组件进行npm发包一、npm发包需要了解的知识（1）判断包名是否合法（2）npm初始化（3）devDependencies、dependencies和peerDependencies二、测试发包三、使用react组件进行npm发包（1）搭建基本组件1. create-react-app直接创建组件即可2. 组

文章目录一、json数据导出Excel（1）react-csv插件（2）使用方法二、通过文件流形式导出（1）文件流导出形式和方法介绍1. 文件流导出两种方式2. 文件流形式（2）利用浏览器直接下载（3）创建a标签下载一、json数据导出Excel（1）react-csv插件需要用到下面这个插件：https://www.npmjs.com/package/react-csv（2）使用方法import { CSVDownload } from 'react-csv';//将要导出的数据存在stat

文章目录一、创建route组件二、路由组件（1）基础路由组件（2）页面组件三、在app中引入四、页面中进行跳转一、创建route组件import React, { FC } from 'react';import { Route as RRoute, RouteProps as RRouteProps } from 'react-router-dom';export type RouteProps = { children: RRouteProps['element'];} & RR

文章目录一、通过popover实现下拉菜单组件（1）基本前端样式（2）实现多选（3）设置全选和半选（4）源代码1. 组件代码2. scss代码如下：3. 转化columns的函数4. 最终实现结果二、页面组件基本使用三、hooks处理table columns数据（1）hooks封装（2）hooks 的使用下面是antd 提供的表头筛选网站https://preview.pro.ant.design/list/table-list?navTheme=light&primaryColor=%231

文章目录一、form表单封装之树形选择框封装1. 代码结构（1）html代码（2）树形选择框的结构（3）css（4）转化函数2. 使用方法（1）单独使用（2）和form表单一起使用二、form表单之时间范围选择器封装1. 代码（1）html代码2. 使用方法（1）单独使用（2）在form表单中使用三、form表单封装1. 代码（1）html（2）数据结构（3）css2. 使用方法（1）导入该组件（2）表单提交方法a. 使用了时间选择框b. 没有使用时间选择框（3）formData数据(4)其他前提说一下，

文章目录一、HTML代码（1）timeJudge（2）onOpenChange（3）onCalendarChange（4）disabledDate二、调用（1）将拿到的数据放在url里便于数据存储（2）定义search一、HTML代码 <Form.Item label={'选取时间范围'}> {getFieldDecorator('timeRange', { initialValue: [timeJudge(search.from as st

文章目录一、react-hook-form介绍（1）安装（2）使用一、react-hook-form介绍React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。（1）安装npm i react-hook-formoryarn add react-hook-form（2）使用from标签使用import React from 'react';import { useForm } from 'react-hook-

文章目录一、使用Antd-mobile（1）下载antd-mobile（2）使用二、修改配置颜色（1）安装包（2）修改package.json（3）根目录新建config-overrides.js法一：直接在modifyVars修改法二：根目录下新建antd-theme.json文件注意：一、使用Antd-mobile（1）下载antd-mobile$ npm install antd-mobile --save（2）使用找到react 项目下的public文件夹下的index.html文件修

文章目录一、插件介绍二、代码封装（1）子组件封装（2）父组件调用三、react-viewer插件api一、插件介绍该插件是根据viewJs封装的react可以使用：github: https://github.com/infeng/react-viewernpm: https://www.npmjs.com/package/react-viewer在线演示：https://infeng.github.io/react-viewer/viewJs：github: https://githu

文章目录一、一、

文章目录本文提供两种分页思路- 纯 js 分页- 使用lodash-es实现分页一、纯js分页（1）html（2）js代码1. list请求函数2. 分页组件函数3. 分页函数二、lodash实现分页（1）html代码（2）js代码1. 请求函数2. 分页组件函数3. 通过useMemo监听分页本文提供两种分页思路- 纯 js 分页- 使用lodash-es实现分页一、纯js分页（1）html<div className={styles['fre-div']}> <Ro

文章目录一、函数（1）图片绝对路径转文件流File1. 主函数2. 获取图片base643. base64转file二、页面结构（最终图片以file格式提交给后端）即formdata（1）html页面结构显示1. 主页面2. 子页面（2） 判断浏览器是否自带复原函数（3）图片旋转函数三、页面使用（1）不涉及图片回显（2）涉及图片回显（回显格式为路径）四、后端接口（1）后端上传接口（2）axios封装http一、函数（1）图片绝对路径转文件流File路径就是类似下面这种"/pic/userpic/4

文章目录本文将介绍两种方式进行批量上传图片（原始input/antdUpload）两种方式的区别1. 原始input是将图片存为一个对象数组，将不合格的图片过滤掉之后，一次性提交给后端2. antd-Upload是循环调用后端接口（上传一张的接口）上传图片，遇到不合格的可以跳过一、原始input（1）页面使用input HTML1. 编辑页面元素2. 设置ref（2）编写onChange函数1. 定义formData2. 编写onChange函数3. 上传图片时4. 图片格式校验函数（3）后端接口1. 封装

文章目录一、渐变（1）封装渐变函数（2）代码中直接调用渐变函数二、横坐标缩放（1）如何设置（2）设置带样式的缩放条（3）设置缩放条和横坐标的距离一、渐变我这里是以折线图为例子渐变还是很简单的在series中，指定areaStyle中使用渐变函数就可以了（1）封装渐变函数以下是我封装的渐变函数import echarts from 'echarts';const getLinearColor = (color1: string, color2: string): any => {

文章目录一、出现的情况二、解决办法（1）理解该函数（2）解决办法1. 修改此函数法一法二2. 使用echarts 5.0以上版本一、出现的情况出现这种情况，通常实在出现zoom缩放，类似于下边我下篇文章介绍如何实现横坐标缩放鼠标可以控制缩放条的大小，在缩到一定程度时，或者出现横坐标重叠，控制台会出现如下错误或者有网友说到的另一种：Uncaught TypeError: Cannot set property '0' of undefined at Vt (echarts.min.js

文章目录1. 运行react项目出现Something is already running on port 3000解决办法：1. 运行react项目出现Something is already running on port 3000这是默认端口，显示有服务运行在3000端口上，用了网上的各种办法，杀进程，或者退出node服务都没有办法解决解决办法：是hosts文件中映射到本地主机的映射不正确（或者没有映射），并且与端口没有任何关系10.2.224.130 localhost 只需将

文章目录一、开发样式介绍二、代码一、开发样式介绍最近开发中，需要用到勾选框，类似下面这种选中样式：选中如下：因为是移动端开发项目，所以需要根据屏幕大小进行缩放使用antd的也可以，只需要覆盖原有样式即可，但是当屏幕变大的时候，勾选框的大小是固定的，同时，阿里的勾选框样式有用到js函数，还是比较麻烦的，所以思来想去还是决定自己手写二、代码react开发环境下，使用的是scss <input name="checkbox"

文章目录一、antd4如何回显数据1. 定义变量2. 保存接口数据到form变量中3. form显示数据一、antd4如何回显数据1. 定义变量const [form] = Form.useForm()2. 保存接口数据到form变量中const requestProfileList = useCallback(async () => { try { const { result } = await fetchProfileListRequest() for

文章目录一、问题详情二、解决办法一、问题详情在开发React项目时，需要引入一些文件会很麻烦，比如前面会有一大堆....import PageTitle from '../../../components/pageTitle/pageTitle'二、解决办法根目录创建tsconfig.json文件，与src文件平级写入以下内容{ "compilerOptions":{ "baseUrl":"src" }, "include":["src"]}

文章目录一、问题介绍二、如何去掉`*`号一、问题介绍在使用from表单时，当我们设置他的规则relus时，会发现，表单的label左边会出现一个*号代码如下：import React, { FC, useCallback } from 'react'import { Form, Input, Checkbox, Button } from 'antd'import styles from './login.module.scss'interface Props {}const Login:

文章目录一、问题详情二、解决办法一、问题详情今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上在render函数中输出一个样式const Login: FC<Props> = (): JSX.Element => { const handleOnFinish = useCallback((value: any) => { console.log(value) }, []) return ( <div className={

文章目录一、图片裁剪插件介绍ImgCrop1. 使用ImgCrop2. 上传函数3. 获取图片base64注意：二、react-cropperreact-cropper使用1. 组件内使用2. 裁剪框对图片进行裁剪（1） 组件中设置上传裁剪框（2） 设置state变量（3） 图片上传时更改state3. 设置裁剪框CutModal（1）裁剪框接收的props（2）裁剪框组件（3）裁剪框用到的state变量（4）原图展示函数（5）图片裁剪函数4. 父组件获取裁剪后的照片(1) 父组件调用函数（2）裁剪展示函数

文章目录1. eslint去掉注释报错：// eslint-disable-next-line react-hooks/rules-of-hooks解决办法2. 使用组件和props编译报错解决办法1. eslint去掉注释报错：// eslint-disable-next-line react-hooks/rules-of-hooks在使用react hook时会遇到一些问题，就是在使用hook的一些api时就会出现如下所示报错，使用vscode的自动修复就是加上注释，但是每用一次就加一次注释非常麻烦

文章目录一、安装ECharts二、折线图三、折线面积图一、安装EChartsyarn add -D echarts-for-reactyarn add -D echarts二、折线图纵坐标和tootip带有百分比，使用了formatter函数进行转换import React, { FC } from 'react';import ReactEcharts from 'echarts-for-react';import styles from './lineChart.module.scss

文章目录一、图片旋转做了回正，获取图片的base64没有做回正则进行调整1. 首先获取该图片的方向2. 根据方向进行调整二、图片压缩图片上传函数一、图片旋转ios上传图片会识别图片的方向，在ios13版本之前会有旋转问题，但是在后面的版本中修复了这个问题：所以，首先需要判别现在这个浏览器是否对图片做了自动矫正我在网上参考了别人的代码，解决办法是通过上传一张写死的图片，并且已知该图片的长和宽，最后通过判别上传后的图片长和宽是否之前的一样来判断浏览器是否自动做了矫正代码如下：const testAu

文章目录一、React Hook原理1. 类组件的缺点：2. 函数组件3. 类组件和函数组件的区别二、React Hook API1. useState 状态钩子2. useEffect()：副作用钩子3. useCallback4. memo一、React Hook原理可以看到没有用React Hook之前，React组件都是类组件1. 类组件的缺点：大型组件难以拆分和重构，测试也比较难业务逻辑分散在组件的各个方法之中，导致逻辑重复组件内还有render高阶组件2. 函数组件在开发过

文章目录一、Redux（1）Redux设计思想一、Redux前两章介绍了props和state，当时有说到，对于大量的组件需要共用同一条数据时，使用props传递是非常麻烦的事情，所以出现了Redux（1）Redux设计思想Web 应用是一个状态机，视图与状态是一一对应的。所有的状态，保存在一个对象里面。Redux原则唯一数据源保持状态只读数据改变只能通过纯函数完成...

文章目录一、react组件(1) props属性一、react组件React 组件基本由三个部分组成，属性 props状态 state生命周期方法(1) props属性我理解的props意义是用来组件传值以todoList为例子，下面是子组件，todoitem子组件使用父组件传递过来的数据import React from 'react';class TodoItem extends React.Component{ constructor(props){ s

文章目录一、react如何将代码显示到页面上（1）JSX生成Element1. JSX语法2. 使用babel对JSX语法进行转换3. 创建虚拟Dom（2）Element生成Dom一、react如何将代码显示到页面上每当我们新建react项目时，项目创建成功后，运行npm start后会出现如下界面：可以观察到时app.js中对该页面进行的设计，代码如下：观察index.js发现最终代码是在这里执行的：（1）JSX生成Element1. JSX语法可以看到第一个张图片中的render函

文章目录1. 下载type的声明文件2. 添加声明文件1. 下载type的声明文件npm install @types/xxx或者yarn add @type/xxx2. 添加声明文件在src目录下加入一个declaration.d.ts文件，用于对模块进行声明声明内容如下：declare module 'xxx';...

文章目录项目创建1. 首先安装create-react-app2. 创建项目唯一解决办法项目创建1. 首先安装create-react-appnpm install -g create-react-app2. 创建项目官网提供的方式是以下命令我创建了自己的项目之后，打开发现里面的目录不一样官网是而我的只有package.json node_modules 缺少src文件夹和public文件夹。。。（等等）唯一解决办法不要在看其他博客说是卸载create-react-app等等其他