ReactJS

2024-12-19 · 阅读 112 · 字数 170

目前用的是 Ant Design Pro V5， 默认的主题下，顶部导航栏是个黑白色调。黑色背景，白色文字。 正常使用场景下，其他还挺好看的。毕竟俺是尤文的球迷，这斑马色非常亲切。 但是，这次遇到公司内部一个项目，logo 有点像小菊花，配合上黑白主题，感觉是一场追悼会的风格。。。 不得已，还是把色调重新调整一下，按照前端页面的风格。 配置文件 src/global.less 在最后加上配置： .ant-pro-global-header-layout-mix { background-color: #F4F8FF !important; } .ant-pro-global-head ...

阅读全文...

2024-12-12 · 阅读 179 · 字数 299

第一次使用 Ant Design 的 AutoComplete 组件，发现当选项中有重复数据时，就会出现这种情况。 下拉过程中，出现大量不断重复的选项，严重影响使用体验。 解决方法 很简单，就是保证后台接口返回的选项列表，不要出现重复选项。 看了一下后台的 golang 逻辑，确实没有处理好前后空格的过滤，导致部分人名出现了重复选项。 但，这不是重点，重点是，我发现了 golang 新版本的 slices 去重函数，非常方便。 golang slice 去重 1.21 之后有个简单的实现方案，好在我的是 1.23: package main import ( "fmt&qu ...

阅读全文...

2024-11-22 · 阅读 308 · 字数 1068

这是一个无比诡异的 Quill 富文本编辑器组件的 bug，浪费了我周四整整一个下午。 唯一的收获是，把早已忘光的 React 组件封装，及组件通信的机制复习了一遍。 bug 现象 在一个 Ant Design Pro 写的后台操作界面中，在弹出的 Modal 组件中，内嵌一个 React Quill 的富文本编辑器组件。 进行内容编辑，输入 hello 换行，再换行，输入 world。保存。 再次打开 Modal，里面 Quill 展示的内容，会看到中间的换行不见了。。。 再次重复上面操作，hello world 直接变为了一行。 继续测试，会看到不单是换行，连列表样式也会消失。 排除服务器 ...

阅读全文...

2024-11-21 · 阅读 365 · 字数 318

作为一个 CRUD boy，经常要新建管理后台的项目。确切的说，应该是经常要 ctrl c / ctrl v 来 copy 老的项目。 但是 ant design pro 好多配置不在一个统一的配置文件中，需要去多个地方修改设置。例如： 顶部标题 登录页的标题 logo 顶部，及登录页 到处找配置，非常浪费脑细胞，本已稀疏的头发也经受不住这么折腾。所以还是能统一管理比较好。 统一配置文件在哪里 config/defaultSettings.ts 虽然这里定义了一些配置。但是像登录页的标题就不受这里控制。 登录页使用配置文件中的标题 import defaultSettings from ' ...

阅读全文...

2024-10-17 · 阅读 371 · 字数 368

AutoComplete: 支持输入的 ant design select 组件 参考： https://ant-design.antgroup.com/components/auto-complete-cn 实际上，我需要的并不是一个 select 组件，而是一个自动补全组件。 因为，select 组件并不支持自定义输入。而 AutoComplete 组件完美契合需求。 其数据结构是： const options = [ { value: 'name1' }, { value: 'name2' }, { value: 'name3' }, ]; 是否可以默认展开选型列表： d ...

阅读全文...

2024-10-11 · 阅读 377 · 字数 210

使用 Antd Pro 实现了一个报价单批量查询的功能。 我想将 react 前端 table 组件的批量查询结果导出为 Excel 文件并下载。 这个不方便用后台接口实现，因为批量查询是通过多次的异步调用接口实现的。 后台并没有对应的一次性导出接口。 所以考虑采用前端实现的方案。 安装依赖 yarn add react-html-table-to-excel react 代码 import ReactHTMLTableToExcel from 'react-html-table-to-excel'; const QuotationSearch: React.FC = () => { ...

阅读全文...

2024-09-28 · 阅读 431 · 字数 535

使用场景 在实现一个批量查询的功能，前端使用 React 写了一个组件。 将多行输入分隔成多个搜索词，因为是模糊查询，搜索速度不快， 为了减少等待时间，于是每个搜索词逐一调用搜索接口。 然后，将搜索结果合并到一个数组，每返回一个结果，就立即显示。 有问题的代码 const [results, setResults] = useState<API.Item[]>([]); for (const keyword of keywords) { // 每个搜索词逐一调用搜索接口 let apiResult = await callSearchApi({keyword: keyword ...

阅读全文...

2023-10-20 · 阅读 2706 · 字数 276

发现默认安装的 react markdown 组件不支持 table 表格的渲染。 在官方文档里查了一下，需要安装额外的组件 remark-gfm 来支持 table 渲染。 安装 remark-gfm tyarn add remark-gfm 代码配置 import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; <div class="markdown_container"> <Markdown remarkPlugi ...

阅读全文...

2023-08-19 · 阅读 1123 · 字数 118

随着前端打包发布日渐频繁，之前偷懒的手动切换 API URL 的方式越来越浪费时间，所以需要能自动区分开发环境和生产环境，节省每次的发布时间。 没想到 react app 脚手架自带了这个功能，可以不依赖三方库实现开发环境的识别： var OcrUrl = "http://www.sunzhongwei.com/ocr"; if (process.env.NODE_ENV === "development") { OcrUrl = "http://localhost:5000/ocr"; } 确实贴心。 ...

阅读全文...

2023-07-16 · 阅读 1672 · 字数 225

即支持文本中的换行符，例如，后台接口返回的 message 是： 暴击 \n 100000 倍 需要能解析其中的换行符。 实际上只需要加上一行 css style={{ "white-space": "pre-line" }} 例如： <Button key={index} onClick={CardButtonOnClick(ctx)} value={item.payload} style={{ margin: "5px", "white-space": "pre-line&q ...

阅读全文...

2023-01-03 · 阅读 5048 · 字数 187

例如，Antd Pro 列表中，我想按照创建时间这列正序或倒序重新排列。 字段配置 { title: '创建时间', dataIndex: 'CreatedAt', valueType: 'dateTime', search: false, sorter: true, }, request 请求 export async function getItems( params: { current?: number; pageSize?: number; }, sort: any, options?: { [key: string]: any ...

阅读全文...

2022-08-11 · 阅读 6163 · 字数 468

后台用 InfluxDB 存储的时序数据，查询时需要使用 UTC 时间。 为了偷懒，我的后台 go 接口没有对时间字段做处理，想直接使用前端传过来的 UTC 时间格式。 于是出现了一个低级的前端 Bug。 功能异常的请求 请求链接格式： http://www.sunzhongwei.com/someAPI?current=1&pageSize=20&startTime=2022-08-09T01%3A10%3A16Z&endTime=2022-08-10T01%3A10%3A16Z startTime: 2022-08-09T01:10:16Z endTime: 20 ...

阅读全文...

2022-08-05 · 阅读 7211 · 字数 262

例如，我想在 Ant Design 的 Input 按钮右侧添加一个快捷按钮， 用来自动将文章标题生成网址 slug。 实现逻辑 Antd Input 组件有个 addonAfter 属性，可以在输入框右侧加入一个图标按钮 图标按钮在定义时，指定 onClick 事件处理 创建一个 react ref 绑定到 antd form 上，方便读取/设置 field 值 (没有使用 antd 自带的 useForm, 我觉得用 React.createRef 更通用些) 最终代码 import type {FormInstance} from 'antd'; import {getSlug} f ...

阅读全文...

2022-05-20 · 阅读 12375 · 字数 484

正确的做法 例如这种，在 form 的 initialValues 里设置各个字段的默认值。 而不是去具体字段里用 value 或 defaultValue 属性来设置默认值。 <Form {...formItemLayout} form={form} name="register" onFinish={onFinish} initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86', }} scrollToFirstError > ...

阅读全文...

2022-05-19 · 阅读 3924 · 字数 185

例如，使用 antd pro 开发的网站管理后台，在服务器部署时，想部署在 /admin 这种非根目录。根目录留给 go gin 的路由处理。 在 nginx 里按照正常 root 配置，访问时会报 404 错误。 config/config.ts 配置方法 需要修改 antd pro 的配置文件： config/config.ts 添加配置： publicPath: '/admin/', base: '/admin/', 打包目录 打包之后，上传服务器，解压后，将 dist 重命名为 admin。 nginx 配置 location /admin { alias /some/path/f ...

阅读全文...