关于react-Ant Design框架Button按钮的基础用法

原创

已于 2022-03-30 10:17:31 修改 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-03-28 22:36:02 首次发布

本文介绍了React-Ant Design框架中Button组件的基础用法，包括：导入与基础按钮创建，添加图标，实现loading状态，以及通过size属性控制按钮大小。详细展示了各个功能的代码示例和实际效果。

前言

最近在学习react-Ant Design框架，把button组件一些基础用法记录一下

引入框架使用组件

基础按钮

首先我们得导入Ant Design和里面的button，才能进行使用。当然得确保之前在项目中你安装了Ant Design
下面是基础款按钮：

import React, {
   
    memo } from 'react'
import {
   
    Button } from 'antd'
import './index.scss'

// React.memo是一个高阶组件,memo类似于PureComponent,不同的是,memo是一个function组件
export default memo(function Index() {
   
   
  return (
    <div className='wrap'>
      <Card title='基础款按钮' className='button-wrap'>
        <Button>按钮</Button>
        <Button type='primary'>按钮</Button>
        <Button type='danger'>按钮</Button>
        <Button type='dashed'>按钮</Button>
      </Card>
    </div>
  )
})