随笔分类 - react
摘要：效果： 代码： // 点击变量添加 const handleTagClick = (param: any) => { const input: any = inputRef.current.input; if (input) { const startPos = input.selectionSta
阅读全文
摘要：React.Children用很多用法，如下图，经常会用到的是toArray()，具体用法可以自行了解，这里记录下map()的用法和使用到的场景。 1. 用法：React.Children.map接收2个参数，第一个是所有子元素，第二个是个回调，可以对每个子元素进行处理，然后返回处理后的子元素。 2
阅读全文
摘要：antd 的 table 组件支持树形结构的数据，不过前提是需要将整棵树的数据一次性全部返回，对于数据量比较大的情况下，可能会需要动态加载数据。 export default function DynamicTable() { const [loading, setLoading] = useSta
阅读全文
摘要：React 1. Excel数据格式化 主要是三个步骤：使用input/antd-upload组件上传需要导入的文件——将excel数据处理为json数据——将json数据处理成antd-table组件所需的数据（主要是增加唯一的key）。 （1）使用antd-upload组件上传需要导入的文件。
阅读全文
摘要：1. 主要是修改两个配置文件：craco.config.js 和 tsconfig.json。 // craco.config.js const path = require("path"); //定义函数resolve,将你想要自定义的路径和js的根路劲作拼接 const resolve = (d
阅读全文
摘要：安装依赖 如果是新项目的话，直接搭建安装即可。如果是已有的项目，想要升级 React 18，需要更新以下几个依赖： react-scripts：yarn add react-scripts（需要 node 14 版本及以上的，如果存在必须使用低版本的项目，推荐使用 nvm 做好 node 包版本管理
阅读全文
摘要：一般后台管理系统，大部分页面功能都是列表和表单的形式。即便使用了组件<Table />、<Form />等，依旧需要写大量高度重复性的代码，比如列表页通常会有筛选栏、操作栏、表格区域、和分页栏四个部分，新增/编辑页通常有N+表单项（eg: 输入框、下拉框、级联框、单选按钮、多选按钮等等）。之前也考虑
阅读全文
摘要：这些问题都是在原有项目升级，依赖版本不对导致的问题。如果是一个全新的项目直接使用React 18，目前还没有发现什么问题。 （1）使用 antd message 会报warning：需要将antd升级到4.20.0 https://github.com/ant-design/ant-design/r
阅读全文
摘要：最近在做一个新的项目，正好近期 react-scripts 发布了新的版本5.0.1，新的版本对 React 18 做了更好的兼容。 而 react 18 在一个月前发布了稳定版本。 新项目就是最好的试金石。后面会把一些使用体验和踩坑记录在这里。 一、react-scripts 更新 升级 升级命令
阅读全文
摘要：官方文档-TreeSelect树选择 常见的用法： 这里分享一种场景：在 checkbox 模式下，仅允许选择子元素（父元素不允许选中）,见下图。 查看 API 文档 TreeSelect API 【总结】：在使用 TreeSelect 组件时，往往采用构造 treeData 结构的数据来渲染，常用
阅读全文
摘要：Prompt 文档 Prompt 示例 使用场景：在离开页面之前，需要判断当前编辑的内容是否已经保存，如果没保存，则弹出提示框，提示用户保存。 查看 API 文档 【总结】：Prompt 有两个属性：message-当用户离开页面时给出的提示信息，when-是否渲染，设置为 true 时，离开页面时
阅读全文
摘要：背景 在 react 项目里，前端请求接口时出现了跨域问题（类似图片中的提示） 这时最快捷的方法就是让后端同学设置请求允许跨域（如图配置响应头） 如果后端同学不配合，就需要靠我们自己来了！ 实现 React项目 1. 在create-react-app和react-script下，可以直接在pack
阅读全文
摘要：需求 实现在系统里批量导入数据，通过上传一个excel文件，前端将文件处理为json数据发送给后端。（最好与后端定义好上传的文件模板，方便处理数据） 实现 使用xlsx； xlsx的github地址：https://github.com/SheetJS/sheetjs； 适用于js、react、vu
阅读全文
摘要：需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址：https://github.com/casesandberg/react-color - 文档地址：http://casesandberg.github.io/react-color/
阅读全文
摘要：需求 展示海南省地图，点击市高亮展示，并在右侧展示对应市的相关数据。 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, useEffect, useState } from "react"; import Sss from
阅读全文
摘要：需求背景 数据表格有时需要增加导出Excel功能，大多数情况下都是后端出下载接口，前端去调用。 对于数据量少的数据，可以通过前端技术实现，减少后端工作。 实现方式 使用插件——xlsx 根据自己项目情况，定义通用的导出方法 代码 xlxs git地址https://github.com/SheetJ
阅读全文
摘要：如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符串。这是因为在file-loader中，esModule选项是默认启用的。 用以下方式之一导入图像： const image = require('../path/to/image.jpg').
阅读全文
摘要：需求 react 自定义一个组件,组件内部样式可以灵活配置 问题 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现 解决办法 用js的方法,在body里创建一个style标签,将hover样式写入 注意,每次创建完成
阅读全文
摘要：引入样式文件 import styles from './footer.module.css'; 注意: 样式文件名必须要以.module.css结尾 单类名设置 <div className={styles.channelLink}>联系我们</div> 多类名设置 方法一 <div classN
阅读全文
浙公网安备 33010602011771号