ReactJS

2023-10-20 · 阅读 2030 · 字数 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 · 阅读 748 · 字数 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 · 阅读 1227 · 字数 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 · 阅读 4369 · 字数 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 · 阅读 5362 · 字数 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 · 阅读 6474 · 字数 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 · 阅读 11608 · 字数 484

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

阅读全文...

2022-05-19 · 阅读 3468 · 字数 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 ...

阅读全文...

2022-05-14 · 阅读 4219 · 字数 888

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

阅读全文...

2022-04-27 · 阅读 3781 · 字数 213

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

阅读全文...

2022-03-10 · 阅读 10064 · 字数 219

组件返回的日期格式问题 antd 选择日期的控件 DatePicker 是输出的 moment 对象，如： Date: "2022-03-10T03:33:14.737Z" 解决办法： // 在 CreateForm 的 onFinish 里加上 if (value.Date) { value.Date = moment(value.Date).format('YYYY-MM-DD'); } 服务器返回日期字符串的解析问题 Uncaught TypeError: date.clone is not a function 解决办法： // 编辑按钮的点击事件里， ...

阅读全文...

2022-03-10 · 阅读 2412 · 字数 345

Bug 现象 在 Antd Pro V5 数据列表页，点击编辑某个条目，去掉某个字段的内容，保存。 再点击新建，还是编辑的上一条信息。 这时点击保存，实际上是覆盖了上一条的信息，而不是新建了一条信息。 这个问题，之前也有发现过，但是一直没有找到复现的方法。一些用户反馈的复现方法也不好使。 这次好不容易发现了重现步骤，看来是 100% 出现的严重 bug，必须修复一下。 问题定位 又试了几种操作流程： 编辑，然后取消，不保存。再点击新建。一切正常，数据没有串。 点击编辑，再编辑另一条。也正常。 猜测是新建条目并保存之后，全局的 currentRow 没有重置。 const [currentR ...

阅读全文...

2021-11-08 · 阅读 2836 · 字数 316

开发时倒是好好的，但是再次 clone 到不同目录，或者其他电脑上 clone 之后，先 tyarn 安装依赖，然后 tyarn start 报错： > tyarn start yarn run v1.22.10 $ cross-env UMI_ENV=dev umi dev Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/brows ...

阅读全文...

2021-10-30 · 阅读 5814 · 字数 478

按钮放在哪里 如 Antd Pro 示例中，放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件，如时间段，类型等。 https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89 button or link link 容易实现吧，target 设置一下，在新 tab 页中下载。 可以确认一下，Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。 Ant Design 中 Bu ...

阅读全文...

2021-10-28 · 阅读 5376 · 字数 432

例如，我要在数据后台拉取一段时间的代理商交易记录，并进行金额数据合计。 展现形式 可以使用 Antd Pro ProTable 的"表格主体自定义"，该区域在 table 列表的上方，更醒目一些。 https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89 相对 Ant Design Table 的"总结栏"，"表格主体自定义" 格式更灵活，更醒目。 关键的一点是，Pr ...

阅读全文...