ReactJS

2021-07-22 · 阅读 8288 · 字数 260

想在 Ant Design Pro 后台中，通过后台接口异步加载 Select 的选项，例如文章的作者。 思路 react effect hook 拉取数据，但是如何保证只在加载时运行一次，而不是结束时还运行一次。实际上用中括号就没有这个烦恼，不指定返回的匿名函数就可以。 获取的数据，如何传递给 select 组件。使用 useState Show me the code: 以 Antd Pro 代码为例 例如下拉选择文章的作者： 引入依赖 import React, {useState, useEffect} from 'react'; import {getAuthors} fro ...

阅读全文...

2021-06-26 · 阅读 8594 · 字数 246

Ant Design Pro V5 默认的登录页面功能繁多，而实际项目需要精简一下。 修改项 去掉手机号登录。因为不想加短信验证功能。 去掉底部的其他登录方式 去掉忘记密码 修改标题 修改文件 src/pages/user/Login/index.tsx 去掉手机登录 删除 Tab 选项卡 - <Tabs.TabPane - key="mobile" - tab={intl.formatMessage({ - id: 'pages.login.p ...

阅读全文...

2021-06-24 · 阅读 5346 · 字数 624

安装 Ant Design Charts 依赖 参考 https://charts.ant.design/zh-CN/guide/start tyarn add @ant-design/charts 多数据曲线 Ant Design Charts 并没有给出同一图表多条曲线的配置方法。 查了一下，Ant Design Charts 是基于 G2Plot 的，所以看一下 G2Plot 的文档。 Ant Design Charts 是 G2Plot 的 React 版本，基于 React、TypeScript 封装了所有的 G2Plot 图表，继承了 G2Plot 的所有配置，对 React ...

阅读全文...

2022-09-27 · 阅读 3151 · 字数 452

我想在 Antd Pro 中为数据图表拉取数据，查实现方法时，发现了 React Effect Hook 这个概念。 参考 https://reactjs.org/docs/hooks-effect.html The Effect Hook lets you perform side effects in function components。 什么是 side effect 呢？ 之前在 Android Jetpack Compose 中也看到过 side effect 这个词，但是并不知道这是什么意思？ 官方文档中给出的解释是，side effect 包含： 数据拉取 (正是我所涉 ...

阅读全文...

2021-06-03 · 阅读 15161 · 字数 712

现象 在 Antd Pro 中使用了 Antd Form 来编辑报修单的进度状态。 但是在选中一条记录，在使用 Select 组件进行编辑时，总是显示状态码，而非状态描述。 看起来是之前遇到过的，select value 的整型与字符串的转换问题。 Warning: children should be Select.Option or Select.OptGroup instead of Option 原始代码： <Form.Item name="status" label="状态"> <Select> <Optio ...

阅读全文...

2021-06-03 · 阅读 16609

在使用 Antd Form 时，当 Form 的宽度很宽，一行只显示一个 input 时，感觉空间有点浪费。 一行能同时显示两个 input 输入框就好了，例如，同时显示： 姓名 电话 Form 中的示例 <Row gutter={24}>{getFields()}</Row> <Row> <Col span={24} style={{ textAlign: 'right' }}> <Button type="primary" htmlType="submit ...

阅读全文...

2021-05-31 · 阅读 10826 · 字数 199

例如，我想在 Antd Pro 列表页的查询区域去掉一些字段，不希望这些字段参与搜索。 参考 ProTable 组件的文档： https://procomponents.ant.design/components/table 实际上在设置 columns 时，就可以通过 column 配置来设置一个字段是否可以被搜索。 代码示例 const columns: ProColumns<API.Article>[] = [ { title: "标题", dataIndex: "title", valu ...

阅读全文...

2021-05-31 · 阅读 8235 · 字数 730

在 Antd Pro 中使用 React Quill 富文本编辑器，上传图片默认会转换成 Base64，然后上传服务器，保存到数据库中。 但是如果图片过大，就非常不适合在数据库中存储，同时也会占用服务器的带宽。 需要改造成 React Quill 上传图片到服务器，然后转发到七牛云 CDN，将链接返回前端。 工具栏显示上传图片 如何自定义 React Quill 的工具栏功能列表？ const toolbarContainer = [ ['bold', 'italic', 'underline', ], [{ 'color': [] }, { ' ...

阅读全文...

2021-05-29 · 阅读 3530 · 字数 1085

上传组件 Antd Pro 中使用 Ant Design 的 Upload 上传组件 https://ant.design/components/upload-cn 图片预览还是有必要的，所以先参考“图片墙”那个示例代码。 封装！解决状态无法重置的问题 简单将示例中的代码复制到了 Ant Design Form 中，但是在 Antd Pro Table List 中切换数据行时，会发现图片预览一直是上一个已上传的图片。即，组件状态没有重置。 看了网上大哥们的实现，我发现都是将 Upload 再封装为一个组件。 然后在 Form Item 中使用该组件。 这样遵循 Form Item 的规范，就 ...

阅读全文...

2021-05-28 · 阅读 7226 · 字数 187

今天发现 Antd Pro 的开发服务经常挂掉，浏览器中显示： Disconnected from the devServer, trying to reconnect... 看起来是由于没有处理后台 404 的错误，导致前端 node 服务挂掉。。。 [HPM] Error occurred while trying to proxy request /api/upload-image from localhost:8000 to http://localhost:8088 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_c ...

阅读全文...

2021-12-24 · 阅读 12932 · 字数 466

需求 能方便整合入 Ant Design Form 中 能支持，或者方便扩展，将富文本编辑器中的图片上传至七牛云存储中 备选方案列表 Ant Design 官方推荐了两个： https://ant.design/docs/react/recommendation-cn React Quill。首选推荐。测试了一圈，确实这个最靠谱。 Braft Editor。有 Ant Design 的集成说明文档：https://braft.margox.cn/demos/antd-upload 安装 Braft Editor tyarn add braft-editor 参考文档： https:/ ...

阅读全文...

2021-05-26 · 阅读 6191 · 字数 107

默认在 Ant Design Pro 中使用 React Quill 富文本组件时，并没有默认高度。 看起来不太舒服。所以想加上高度限制： 最低高度限制 最高高度限制 实现 在自定义的 Form 组件目录下，新建一个 css 文件，例如 CreateForm.css. .ql-editor{ min-height: 200px; max-height: 500px; } 然后在组件中引入 css 文件即可 import './CreateForm.css'; ...

阅读全文...

2021-05-25 · 阅读 6326 · 字数 670

这次基本是边修改 Antd Pro 模板，边学习 reactjs 的情况下，摸索新建、更新复用 Modal Form 的使用的。 我觉得能实现 Form 新建、编辑功能，基本上 reactjs 就算是入门了。。。 上手时间成本 看 reactjs tutorial 一个小时 尝试修改 TableList 的代码改成标准 Ant Design 组件，删除 Pro Components 组件，半天 默认新建 Modal 用的 ModalForm 的局限性 ModalForm 是 ProForm 的一种，即 Pro Components 的组件之一，参考 https://procomponent ...

阅读全文...

2021-05-25 · 阅读 2652

props 为传入组件的参数，全称 properties state 为内部状态管理 基于 class 的 react 组件：onClick={() => alert('click')} 回调函数用大括号包裹，并且必须使用剪头函数。参考 value={this.state.squares[i]}，可见react jsx语法是用大括号来包裹 html 属性变量，而 vue 则是在属性名前加：，都是为了显式区分属性变量。而在基于函数的组件中，onClick={props.onClick}，就不需要箭头函数的写法了。 浏览器辅助插件 React Devtools extension Lift ...

阅读全文...

2021-05-17 · 阅读 9358 · 字数 121

Antd Pro 列表页中报了一条警告信息： devScripts.js:6523 Warning: Each child in a list should have a unique "key" prop. 虽然是 ProTable 组件，但是文档里并没有提到这个属性，需要参考 ant design 的 Table 组件 https://ant.design/components/table-cn/ rowKey：表格行 key 的取值，可以是字符串或一个函数 应该是作为 row 的唯一标识的。 修改成对应的后台数据返回 key 就可以了，例如： <ProT ...

阅读全文...