多行antd警报描述 - 腾讯云开发者社区

文章/答案/技术大牛

发布

关于在reactjs项目中如何用webpack配置组件按需加载

在使用 import {Button} from 'antd' 的时候打开控制台,会出现这样的警告 You are using a whole package of antd, please use...实际我们在用antd的时候,只需要一个Button组件,它给完全加载进项目了,要知道antd 8W多行代码,执行完之后得花一些时间吧....于是官方就提供了下面的解决方案: 第一: import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd...query: { presets: ['es2015','react'], plugins: [["import", { libraryName: "antd

9486 0

react v16.7 版本配置 less less-loader antd按需

第一步 create-react-app myapp 创建同一个react项目 yarn add antd less less-loader babel-plugin-import 需要配置的 less...配置 antd 按需引入如上图代码这时使用的button组件是没有样式的，但是如过引入整个antd.css 又超级的大两万多行css不能小看，那么就需要babel-plugin-import这个依赖了...// 代码块 358行 plugins 查看中加入以下代码 [require.resolve('babel-plugin-import'), { libraryName: 'antd', style:

1.5K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）

解析 AntD Table 的 columns 和 dataSource 因为我们是用 AntD 的 Table，其实已经构造出了表头和具体的表格数据，所以只需解析即可。...通过 worksheet.addRows()方法可以为工作表添加多行数据，因为上面我们已经设置了表头，程序知道了每列数据应该匹配哪个字段，所以这里直接传入 Table 的 dataSource 即可。...修改字体样式可以设置文字的字体、字号、颜色等属性，支持的属性如下表：字体属性描述示例值 name 字体名称。 'Arial', 'Calibri', etc. family 备用字体家族。...9, 10, 12, 16, etc. color 颜色描述，一个包含 ARGB 值的对象。...通过 worksheet.addRow()将表头添加为一行数据，多行表头就添加两次。然后通过 addHeaderStyle()给表头添加样式，这是自己封装的方法，在 utils里。

11.8K2 0

React后台管理前端系统(基于开源框架开发)起步式

但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin...handleModalVisible()} > 描述...columns = [ { title: '规则编号', dataIndex: 'no', }, { title: '描述...Fragment> 配置订阅警报...我们要对这个库或组件有个大致印象,比如我们要在页面修改antd 的Dropdown组件,就要去antd官文看看有那些参数可以调整.

1.9K2 0

使用antd表格组件实现日程表

环境搭建因为公司的项目是基于jsp的，antd本想用Vue版本的，无奈它与jsp的一些语法冲突了跑不起来，于是就尝试了react版本的antd，它跑起来了没有发现任何兼容性问题，一切正常。..."> 上述用到的资源文件地址: react-antd-schedule/lib 我们需要把react相关代码写在text/babel标签中，如下所示，我们打印antd和react看看是否有值。...image-20201119161505912 需要注意的是，CDN引入React和antd，他们是在全局暴露了一个对象，在使用它内部的方法时就需要React.xx、antd.xx来访问了。...本来预估了一周的开发时间，后面需求的不断增加、变更、UI设计效果图，我的页面代码也从一开始的100多行累加到现在的1000多行，这一套折腾下来，直到需求开发完成交给测试，花了20多天的时间。...于是，我多试了几次，发现还是不渲染，打开控制台后就奇迹般的渲染上去了，有点摸不着头脑，就求助了下网友，我才恍然大悟，原来是antd没有监听到引用地址的改变，得到了下述解决方案，用一个函数去处理它，让antd

3.7K2 0

将React项目从webpack升级到Vite

或者直接不报错，而是失效（下面会说这些坑）接下来克隆我的脚手架到本地地址 https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd...allowSamePrecedence: false, }, ], //禁止混合使用不同的操作符 'no-multi-str': 'warn', //禁止多行字符串...(需要多行时用\n) 'no-native-reassign': 'warn', //禁止重新分配本地对象 'no-obj-calls': 'warn', //禁止将全局对象当作函数进行调用...super 'no-undef': 'error', //禁用未声明的变量 'no-unexpected-multiline': 'warn', //禁止使用令人困惑的多行表达式...别忘了给个star,开源不易，里面还有其他的源码，https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd ?

3.2K3 0

React问题集序

问题描述 antd version: 2.7.4 OS and its version: windows7 Browser and its version: Chromium 55.0.2883.87...antd--react组件库，引入后进行npm run dev编译的出现找不到对应的样式堆栈信息详情 ERROR in ..../~/antd/lib/input/style/index.less Module parse failed: E:\PersoanlProjects\bookreader\node_modules\antd...SyntaxError: Unexpected character '@' (1:0) 解决方案配置css loaders去掉exclude属性，不要包含node_modules/antd；反馈编译正常...参考资料查找了官方Issuse--Webpack css loading 问题描述 react version: 15.3.2 OS and its version: windows7 Browser

8416 0

某一线前端小组长的 Code Review 分享

所以今天就由小弟我，给大家分享一下，小厂一线前端平时写的代码作者能力有限，里面的评论不一定十分正确，仅做记录，抛砖引玉，以供学习参考~ 项目背景: react 16.8+ antd@4 Talk...state 的粒度太细避免一个组件里面有n多行的useState 避免直接修改对象值，React 要求数据不可变官网解释：zh-hans.reactjs.org/tutorial/tu…[1] 不熟悉...Antd 组件的 api 这里想修改Popover组件内部的样式，想当然的就在外面套多一层div了 ant-design popover api: overlayClassName[2] Table

1051 0

ExcelJS导出Ant Design Table数据为Excel文件

可以满足（但不限于）以下需求：简单表格导出为表格添加样式（更改背景色、更换字体、字号、颜色）设置行高、列宽解析 ant-design 的 Table 直接导出 excel，根据 antd 页面中设置的列宽动态计算...', 'four', 'five']; worksheet.spliceColumns(3, 1, newCol3Values, newCol4Values); row 行可以添加一行或者同时添加多行数据...'; import React from 'react'; import type { ColumnsType } from 'antd/es/table'; import * as ExcelJs from...解析 AntD Table 的 columns 和 dataSource ： // 根据 antd 的 column 生成 exceljs 的 column const DEFAULT_COLUMN_WIDTH...通过 worksheet.addRows() 方法可以为工作表添加多行数据，因为上面我们已经设置了表头，程序知道了每列数据应该匹配哪个字段，所以这里直接传入 Table 的 dataSource 即可。

5.4K3 0

Ant Design 是怎么管 Icon 的？

Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系；注：antd 设计价值观 https://ant.design/docs/spec...Ant Design 的 Icon 使用的是 SVG 格式图标； —— 《antd 官网》注：为什么选 SVG 而不是 IconFont https://blog.github.com/2016-02...如何使用 antd 的 Icon？ 3.1. 常规用法直接通过的 type 和 theme 指定图标。 3.2. 引用 iconfont.cn 中的定制图标 3.3....Ant Design 的 Icon 由 4 部分构成： ant-design-icons/icons：存储所有原始 svg 图标文件，并负责转换、导出 svg 的定义描述； ant-design-icons.../icons-react：可以将 svg 定义描述转换为 React 组件； ant-design/Icon：负责整合 icons 和 icons-react，将 icons 导出的所有 svg 定义描述导入

4.7K3 0

技巧 - 快速定制生成 Ant Design 主题 CSS 文件

温馨提示：因微信中外链都无法点击，请通过文末的 “阅读原文” 到技术博客中完整查阅版； 1、起因因为项目的缘故，Antd 的样式 CSS 文件通过 link 标签引入，而该项目又要求自定义 Antd...作为业界优秀的开源项目，Antd 提供了自定义定制主题样式的方法（在官网定制主题就有详细的说明）然而 Antd 却只提供了 LESS 样式定制的功能，并没有提供现成的生成 CSS 样式文件定制并下载的功能...利用关键字 antd theme css custom 搜索一番，还真找到几篇有用的文章（见文末参考文档）。随后经过本人的总结和实践，就有了本文介绍的定制生成 Antd 主题 CSS 样式文件的方法。...后续想要生成另外一份定制的 CSS 文件就更简单了：修改自定义的 my-theme.less 文件中的样式变量执行 lessc --js my-theme.less result.css 上述仅仅是描述了生成...不用担心，网上有人做了，有个很好用的线上预览工具 Antd Live Theme: https://antd-live-theme.firebaseapp.com/ ，可直接预览修改主题样式变量后的效果

3.1K2 0

ExcelJS导出Ant Design Table数据为Excel文件

4893 0

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

，不会进行 AntD 的版本升级，需要手动将其升级至 4.22.5。...● validator 在 antd3 时，我们使用 callback 返回报错。但是 antd4 对此做了修改，自定义校验，接收 Promise 作为返回值。...● table.checkbox ・问题描述升级后，checkbox 宽度被挤压了。・解决方案通过在 rowSelection 中设置 columnWidth 和 fixed 解决。...dataIndex: ['user', 'userName'], key: 'userName', width: 200, } ● table pagination showSizeChanger ・问题描述...● table sorter columnKey ・问题描述表格中如果要对表格某一字段进行排序需要在 columns item 里设置 sorter 字段，然后在 onChange 里拿到 sorter

4.1K3 0

React+Antd+ProTable 表格跨页选择

需求需要使用 antd pro的表格进行分页多选多选的时候, 不能只返回 id , 而是需要返回 id/name/link回显数据也需要同样的字段返回, 然后进行分页的回显思路简单查阅 ant design...components-table-demo-row-selection-custom defaultSelectedRowKeys: [1], }}经过上面的一个代码, 你会发现, 其实整体的效果已经完成了一半了, 因为antd...找寻是否有 onChange或者 onSelect这类的操作函数是否能够通过以上找寻的函数进行重构返回的数据最后我找寻到的 api 如下onSelect - 单行选择 onSelectMultiple - 多行选择

8661 0

三分钟迁移 antd@4

第一时间享受到了的 antd@4 各种优势。 ?...Want to use better and faster antd?...for specific changes > https://next.ant.design/docs/react/migration-v4-cn > 如果你想获得迁移到新的版本，可以按照上面的文档描述实现...', {}]], } 无痛迁移 antd@4 就是这么简单。...所有的官方区块也已经支持了 antd@4，请大家安心使用。如果想使用 antd 的新特性，不打包全部的 icon，可以尝试升级 ProLayout@5.0。

1.9K3 0

「前端组件化」以Antd为例，快速打通UI组件开发的任督二脉

当时项目开发都使用现成的UI组件，最初用Element UI，后来换成了Antd。无论换哪种组件，都帮助节省了很多开发时间，自己平时组件开发，最多就进行一些简单的标题、弹窗、表格的二次封装。...如果刚开始不是很擅长设计参数，可以参考Antd的参数设计，Antd的组件丰富且功能强大，所以参数考虑的也很周全。边学边练，效果更佳。...如图为Antd的Input输入框组件「平平无奇」的参数：Antd组件功能赏析电影有精彩片段赏析，Antd的组件很丰富，如果一一列举，详细介绍，可能我要写到下个月，所以我选了几个常见且基础的组件，来看看Antd...内容展示，标题、子标题、详情描述。rc-steps我在看Antd的源码时发现，有些组件底层用的第三方react-component中的组件。当然这个组件库也是属于Antd的。...columns参数columns表示表格列的配置描述，表格有哪些列表项都是通过它定义的。Tabel组件会将columns传入RcTable组件。columns的值确定表头thead都有哪些分组。

2.3K1 0

Web全栈入门-美剧帮项目

前端项目前端用主要使用 React+Antd 做界面，Redux管理数据，Axios做HTTP请求，下面是目录结构 ?...爬虫 node编写，使用了 node-crawler 框架，爬取美剧天堂（地址：查看链接）数据，保存到 MongoDB，200多行代码，写的我自己都看不下去，主要是为了获取数据，实现功能就好，直接上gayhub

5623 0

前端反卷计划-组件库-01-环境搭建

source.fixAll.eslint": true // 保存后字段格式化 }, // 检查识别不出来的单词 "cSpell.words": [ "ahooks", "antd...: false, // 使用单引号 singleQuote: true, // 缩进 tabWidth: 2, // 使用 tab 缩进 useTabs: false, // 后置逗号，多行对象...commit lint为了规范commit的描述。在git commit的时候进行lint，执行下面命令。下面两个命令一个是mac，一个是windows，按需执行。...husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'经过上面执行，会生成文件如下：图片5.这样在git commit的时候，如果描述不对

2613 0

熬夜准备的一个React项目升级Vite的指南

或者直接不报错，而是失效（下面会说这些坑）接下来克隆我的脚手架到本地地址 https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd...allowSamePrecedence: false, }, ], //禁止混合使用不同的操作符 'no-multi-str': 'warn', //禁止多行字符串...(需要多行时用\n) 'no-native-reassign': 'warn', //禁止重新分配本地对象 'no-obj-calls': 'warn', //禁止将全局对象当作函数进行调用...this 或 super 'no-undef': 'error', //禁用未声明的变量 'no-unexpected-multiline': 'warn', //禁止使用令人困惑的多行表达式...别忘了给个star,开源不易，里面还有其他的源码，https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd

1.3K2 0

UI2Code 之利用 antd.sketchapp 生成训练数据

封面由ARKie智能设计助手生成 Ant Design 最近发布了 antd.sketchapp ：使用 skpm 构建工具，基于 React Sketch.app 及 Ant Design ，实现了...antd.sketchapp ，可以很方便的把 Ant Design 的前端代码转化为 sketch 文件。...CNN 需要大量的训练数据，我们可以尝试下利用 antd.sketchapp 大量生成 Code 及 UI 图像的成对数据。...这里需要做很多实验跟抽象的工作，如何用矩阵的方式描述代码。...通过 json 数据描述可以组合出常用的页面结构，赋予页面内布局结构的动态化能力。

1.5K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

关于在reactjs项目中如何用webpack配置组件按需加载

react v16.7 版本配置 less less-loader antd按需

前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）

React后台管理前端系统(基于开源框架开发)起步式

使用antd表格组件实现日程表

将React项目从webpack升级到Vite

React问题集序

某一线前端小组长的 Code Review 分享

ExcelJS导出Ant Design Table数据为Excel文件

Ant Design 是怎么管 Icon 的？

技巧 - 快速定制生成 Ant Design 主题 CSS 文件

ExcelJS导出Ant Design Table数据为Excel文件

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

React+Antd+ProTable 表格跨页选择

三分钟迁移 antd@4

「前端组件化」以Antd为例，快速打通UI组件开发的任督二脉

Web全栈入门-美剧帮项目

前端反卷计划-组件库-01-环境搭建

熬夜准备的一个React项目升级Vite的指南

UI2Code 之利用 antd.sketchapp 生成训练数据

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐