antd组件的使用

当我们在项目中安装好antd以后,我们就可按需引入我们需要的组件来进行开发啦,下面做一个简单的示例,来说明我们如何按照antd的api来进行组件的应用:

// src/App.js
  import React, { Component } from 'react';
  import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">这是我采用antd写的按钮</Button>
        </div>
      );
    }
  }

  export default App;

比如我需要使用antd的Button组件,在上面的代码中第三行,我从antd中引入Button组件

import { Button } from 'antd';

然后,在需要按钮的地方写上Button组件即可

<Button type="primary">这是我采用antd写的按钮</Button>

我们也可以在官网上查看api对应的Button组件的使用方式https://ant.design/components/button-cn/

里面会有详细介绍按钮的类型大小状态等等属性

当然我这里只是列举的一个最通用的组件,antd里面还用很多其他的组件,详情可以查看https://ant.design/docs/react/introduce-cn

当然如果你可以独立完成antd在项目里面的引用,也能够流畅的应用Button组件的话,那么你已经学会使用antd了