ReactJS

分类下相关文章

React Quill 富文本编辑器与 Ant Design Modal 同时使用时,html 标签消失

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

阅读全文...

ant design pro 的统一配置管理

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

阅读全文...

Ant Design Pro AutoComplete 组件同时支持下拉选择及自定义输入

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 ...

阅读全文...

React 组件实现将 Ant Design Table 的展示结果导出 Excel

使用 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 = () => { ...

阅读全文...

React 在 for 循环中 setState 最后一次执行结果会覆盖前面的结果

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

阅读全文...

react markdown 组件支持 table 表格渲染

发现默认安装的 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 ...

阅读全文...

自动化部署:React App 脚手架工具,前端发布时,自动切换 API URL 为生产环境配置

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

阅读全文...

React 中使 Button 显示多行文本

即支持文本中的换行符,例如,后台接口返回的 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 ...

阅读全文...

Antd Pro ProTable 表格按指定列排序

例如,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 ...

阅读全文...

Ant Design dateTimeRange 组件 UTC 时间的时区问题

后台用 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 ...

阅读全文...

Ant Design Form Input 组件添加快捷按钮及点击事件

例如,我想在 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 ...

阅读全文...

Ant Design Form 字段设置默认值

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

阅读全文...

nginx 部署 antd pro 在非根目录报 404 错误

例如,使用 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 ...

阅读全文...

ant design 组件上传视频直传七牛云

由于视频文件太大,不适合通过自己服务器中转一层,还是在前端直接传到七牛云合理。 文档 七牛云 Go SDK 文档,参考上传凭证的生成:https://developer.qiniu.com/kodo/sdk/go 七牛云 JS SDK 文档,参考其自定义文件名:https://developer.qiniu.com/kodo/1283/javascript 关于 token token 上传凭证。 作用:客户端(移动端或者Web端)上传文件的时候,需要从客户自己的业务服务器获取上传凭证 有效期:默认情况下,在不指定上传凭证的有效时间情况下,默认有效期为1个小时。也可以自行指定上传凭证的 ...

阅读全文...

Antd Pro 无法修改图标,Module "./@ant-design/icons/xxx" does not exist in container

Antd Pro V5 的诡异问题不断,在新增了一个路由配置项,修改图标之后,导致报错。 之前的 V5 beta 版从来没有遇到这个问题,是最新的 V5 正式版新引入的问题。 新图标导致报错 { name: '配置项', icon: 'SettingOutlined', path: '/settings', component: './Settings', access: 'canAdmin', }, 报错信息: Module "./@ant-design/icons/SettingOutlined" does not exist ...

阅读全文...