首先介绍一下antd组件库
antd组件库是蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
1、 antd 是基于 Ant Design 设计体系的 React UI 组件库
2、开箱即用的高质量 React 组件
3、使用 TypeScript 构建，提供完整的类型定义文件
一、装包
npm install antd --save二、进入官方找到需要的组件
以按钮、输入框作为介绍
进入官方页面点击顶部导航栏的组件。
在左侧导航栏找到按钮
找一个想用的按钮 下面最右侧的图标显示代码
三、引用
需要使用antd组件的页面导入所需组件，并且导入antd的样式文件
import { Button } from 'antd';
import 'antd/dist/antd.css'在页面中引入组件库的按钮和css样式文件
把按钮的代码复制到组件中需要的位置即可
import React, { Component } from 'react'
import { Button } from 'antd';
import 'antd/dist/antd.css'
export default class Zj extends Component {
static propTypes = {
}
render() {
return (
<div>
<Button type="primary">按钮组件</Button>
</div>
)
}
}
效果：
输入框引入 需要在import里面引入一个输入框的组件
import { Input, Button } from 'antd'在组件库中找一个合适的输入框复制代码写到页面即可
import React, { Component } from 'react'
import { Button,Input } from 'antd';
import 'antd/dist/antd.css'
export default class Zj extends Component {
static propTypes = {
}
render() {
return (
<div>
<Button type="primary">按钮组件</Button>
<Input placeholder="输入框" />
</div>
)
}
}
其他组件大致差不多
标签：import,React,按钮,组件,antd,页面 来源： https://blog.csdn.net/weixin_57935165/article/details/122784682
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。