antd的使用

最新推荐文章于 2025-06-11 12:23:56 发布
最新推荐文章于 2025-06-11 12:23:56 发布
阅读量2.3w 收藏 7
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 react 文章标签： antdesign的使用方法 antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangjjz/article/details/90436587
本文介绍了Antd组件的使用方法。可在其官网查看各组件详细使用代码，还给出了简单使用步骤，包括通过npm安装、引入样式、引入组件，最后给出了输入框组件的使用示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

antd的使用:antd的官网有每一个组件的详细使用代码，下面简单描述一下
1:安装 npm install antd --save
2.样式引入import ‘antd/dist/antd.css’;
3.eg 引入import { Input } from ‘antd’;
4.使用<Input placeholder={‘请输入’}/>
在这里插入图片描述

Ant Design使用
qq_43260366的博客
01-10 3158
Anchor组件 用于包裹Link组件affix 是否固定为固定模式， 默认为固定模式若是固定模式(true) :Anchor组件在滑动到当前组件之前是静态定位，滑动到当前组件之后为固定定位(固定在可视窗口的最顶端)若是非固定模式(false):Anchor组件一直都为静态定位(不脱标)举例说明 -> 案例1targetOffset:锚点滚动偏移量,默认为0若是设置偏移量：对应元素不是滑动到当前元素的最顶端而是最顶端下移对应偏移量举例说明-> 案例2。
Antd 使用DatePicker报错 date.clone is not a function
cx0517的博客
12-07 1115
今天在Form表单中使用DatePicker组件。页面如果添加name,页面报错。去除绑定Form中的name,在DatePicker中使用value 绑定值。getValueProps为子元素添加额外的属性。使用getValueProps。
Antd的使用
DxCaesar的博客
02-12 1549
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 React 组件。 使用 TypeScript 构建，提供完整的类型定义文件。 全链路开发和设计工具体系。 安装 npm install antd --save 使用 1. 一般引用方式（不推荐） import B...
React——高阶组件
最新发布
CbukeJ的博客
06-11 116
如果将 ref 添加到 HOC 的返回组件中，则 ref 引用指向。当在 React Developer Tools 中检查由 HOC 创建的组件时，它们默认显示为类似。（如主题、语言包）的值作为props注入，避免组件直接依赖Context API。：封装数据获取的通用模式（加载/错误/数据状态），简化组件中的数据请求逻辑。（值收集、验证、提交），简化表单组件的复杂度。在 HOC 内部，为它返回的包装组件设置一个。返回的组件与前一个渲染中的组件相同（当组件被HOC包装时，原始组件的。
antd使用craco的按需引入、主题定制最新版
m0_56986233的博客
04-15 1129
1.安装craco yarn add @craco/craco 2.修改 package.json 里的 scripts 属性 这里我整理了，直接复制过去就成 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, 然后再app.js中引入 import 'antd/dist/antd.l
React 学习笔记 —— antd 的使用
叹之
04-07 616
安装使用 antd官网 运行 yarn add antd 引入使用 import React, { Component } from 'react' import {Button} from 'antd' // 引入需要的组件 import 'antd/dist/antd.css' // 引入样式 export default class App extends Component { render() { return ( <div> <
【前端】reacthooks+ts重写慕课网共享单车项目(前半部分是关于antd使用的demo).zip
04-28
【前端】reacthooks+ts重写慕课网共享单车项目(前半部分是关于antd使用的demo).zip
AntD使用Form表单DatePicker时间组件时间差一天bug
莉兹Liz的博客
11-29 2842
问题 在使用AntD使用Form表单DatePicker时间组件的时候，测试意外测出一个历史bug，很神奇，时间会差一天！直接使用Form表单并提交时间会显示时间是Object类型，选择2020-11-30，保存的时候会变成2020-11-29xxx（具体时间后缀），可能是时间组件为英文的原因？转换为中文后日期还是没有转过来，就差了一天…… 解决 保存时用方法转一下日期 if(typeof(item.date) === 'object') { item.date= moment(new Date(it
TS 结合 Antd 使用时，部分组件的样式（例如 RangePick）出现问题
浮沉半生的博客
05-31 2726
问题 TS 结合 Antd 使用时，部分组件的样式（例如 RangePick）出现问题。 解决办法 将 tsconfig.json 中的 module属性修改为：es2015。"module": "es2015" 将 babel 配置添加到 ts 和 tsx 的文件解析中。 { test: /\.(ts|tsx)$/, include: path.resolve(_...
antd通过 filterDropdown 自定义按某天时间搜索功能
10-16
5. `render`：这是一个用于渲染表格单元格内容的方法，这里使用了`react-highlight-words`库，高亮显示匹配搜索文本的部分。 `handleSearch`和`handleReset`方法分别处理搜索和重置操作。`handleSearch`调用`...
react-antd:使用react＆antd建立个人电脑网站
05-02
技术栈 react@16.0 + redux@3.7.2 + react-router@3.2.0 + webpack@3.10.0 + fetch@2.0.3 + less@2.7.1 + antd@3.1.3 npm install (安装依赖包) npm start (运行本地开发环境) npm run build (打包) 另开启一个命令窗口 启动node的本地json数据代理服务 npm run mock 想要体验聊天室功能 先开启socket服务 运行命令 npm run chat 服务端返回数据结构格式 { data: { totalCount: 100, currentPage: 1, pageSize: 10, 'list': [ ], }, msg: '', status: 1, } 所有异步请求返回都会经过u
React中antd的使用技巧
而世之奇伟、瑰怪，非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也！
01-24 829
(2).修改config-overrides.js，内容如下：libraryName: 'antd', //对哪个库进行按需引入libraryDirectory: 'es', //样式模块作为ES6模块处理style: true,//处理原文件样式}),javascriptEnabled: true, //允许js更改修改antd的less文件中的变量}),
React 入门学习（十三）-- antd 组件库的基本使用
小丞同学
09-28 2490
这篇文章是学习 React 中 React antd组件库的学习笔记 引言 在我们学习JavaScript 的时候，我们学习了一个 bootstrap 的组件库。可以让我们快速开发，但是我们现在学习了 React ，一种组件化编程方式，很少说会去贴大量的 HTML 代码，再配一下 CSS，JS。我们也有一些现成的组件库可以使用，我们只需要写一个组件标签
使用antd
x1037490413的博客
01-21 539
首先要下载antd依赖包 yarn add antd 重启vscode能在node_modules里找到antd包，dist里有antd.css样式 在需要用的地方导入antd以及样式文件 如果需要用图标等库，要引入
antd使用
cs840610862的博客
09-20 958
antd全局中文配置 import zhCN from 'antd/es/locale/zh_CN'; function App() { return ( <div locale={zhCN}> // 全局包在外面 </div> ); } antd的日期组件默认是显示英文，中文配置方法 import moment from 'm...
React之使用antd组件
学习笔记
09-04 2531
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
antd的简单使用(主要参考官网文档)
fire_zero的博客
05-04 3953
antd的使用 1、添加antd 安装: yarn add antd 使用: 引入:想在哪个组件用，就在哪个组件引入 import {Button} from 'antd' 引入样式： import 'antd/dist/antd.css' 2、优化antd,按需引入样式 配置按需引入: (参考官网的在 create-react-app 中使用文档) 1.切到文档的【高级配置】 2.yarn ad...
antd使用记录
GoodAll_K的博客
05-30 300
1.安装，在react项目里 npm install antd --save 2.使用 import {DataPicker} from 'antd' import 'antd/dist/antd.css' 3.DatePicker 变化的时候默认会传递当前的moment对象（第一个参数）和日期字符串（第二个参数）； ...
antd 使用pdfjs预览
05-26
Ant Design 是一个 UI 框架，而 PDF.js 是 Mozilla 开发的一款开源的 JavaScript PDF 阅读器。您可以使用 Ant Design 的 Upload 组件上传 PDF 文件，在上传完成后，通过 PDF.js 渲染出 PDF 文件的预览效果。具体实现方式可以参考以下步骤： 1. 在上传组件中，通过 `beforeUpload` 属性来获取上传文件的 Blob 数据，并将其传入 PDF.js 进行渲染。 ```jsx import React, { useState } from 'react'; import { Upload } from 'antd'; import pdfjs from 'pdfjs-dist/webpack'; const { Dragger } = Upload; const PdfPreview = () => { const [pdfUrl, setPdfUrl] = useState(null); const handleBeforeUpload = (file) => { const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = async (event) => { const pdfData = new Uint8Array(event.target.result); const loadingTask = pdfjs.getDocument({ data: pdfData }); const pdf = await loadingTask.promise; const page = await pdf.getPage(1); const scale = 1.5; const viewport = page.getViewport({ scale }); const canvas = document.createElement('canvas'); const canvasContext = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext, viewport, }; const renderTask = page.render(renderContext); await renderTask.promise; setPdfUrl(canvas.toDataURL()); }; return false; }; return ( <Dragger beforeUpload={handleBeforeUpload}> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">点击或拖拽文件到此处上传</p> </Dragger> {pdfUrl && <img src={pdfUrl} alt="PDF preview" />} ); }; export default PdfPreview; ``` 在上述代码中，我们使用了 `pdfjs-dist/webpack` 模块来加载 PDF.js 库，然后在 `beforeUpload` 属性中获取上传文件的 Blob 数据，通过 PDF.js 进行渲染，并将渲染后的图片数据作为 URL 存储在组件的状态中，最后将图片渲染在页面上。 2. 在渲染 PDF 预览时，可以使用 Ant Design 的 Image 组件来显示图片。 ```jsx import React, { useState } from 'react'; import { Upload, Image } from 'antd'; import pdfjs from 'pdfjs-dist/webpack'; const { Dragger } = Upload; const PdfPreview = () => { const [pdfUrl, setPdfUrl] = useState(null); const handleBeforeUpload = (file) => { const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = async (event) => { const pdfData = new Uint8Array(event.target.result); const loadingTask = pdfjs.getDocument({ data: pdfData }); const pdf = await loadingTask.promise; const page = await pdf.getPage(1); const scale = 1.5; const viewport = page.getViewport({ scale }); const canvas = document.createElement('canvas'); const canvasContext = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext, viewport, }; const renderTask = page.render(renderContext); await renderTask.promise; setPdfUrl(canvas.toDataURL()); }; return false; }; return ( <Dragger beforeUpload={handleBeforeUpload}> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">点击或拖拽文件到此处上传</p> </Dragger> {pdfUrl && <Image src={pdfUrl} />} ); }; export default PdfPreview; ``` 在上述代码中，我们使用了 Ant Design 的 Image 组件来显示 PDF 预览图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值