shellon

摘要： React.Children用很多用法，如下图，经常会用到的是toArray()，具体用法可以自行了解，这里记录下map()的用法和使用到的场景。 1. 用法：React.Children.map接收2个参数，第一个是所有子元素，第二个是个回调，可以对每个子元素进行处理，然后返回处理后的子元素。 2 阅读全文

摘要： 树形结构的数据，即源数据： const origin = { "id": "40953897304457339", "name": "一级单位", "children": [ { "id": "52979376890839070", "name": "二级单位1", "children": null 阅读全文

摘要： 1. 场景：想通过拖动弹窗右下角，实现弹窗大小的自由拉伸，效果类似textarea。 2. 实现思路：利用css的resize属性，将Modal弹窗的容器盒子改为支持拉伸的元素。 我们先来看一下resize的用法（来自MDN）。 （1）resize CSS 属性允许你控制一个元素的可调整大小性。 （ 阅读全文

摘要： 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-scripts 发布了新的版本5.0.1，新的版本对 React 18 做了更好的兼容。 而 react 18 在一个月前发布了稳定版本。 新项目就是最好的试金石。后面会把一些使用体验和踩坑记录在这里。 一、react-scripts 更新 升级 升级命令 阅读全文

摘要： // html <span class="iconfont icon-up"></span> // css .icon-up { font-size: 30px; background-image: linear-gradient(#fff, #dd0000); -webkit-background 阅读全文