React引入Antd UI 及 基本使用方法

Antd ui是一个非常不错的ui组件 也是目前 React项目开发 选择最多的一款组件库
文档地址
https://ant.design/docs/react/introduce-cn

我们直接来写代码演示一下
首先要创建一个react项目 然后在终端引入Antd UI

npm install antd --save

然后我们的组件库就进来了

我们在src下的 index.js 中引入它的全局样式

import "antd/dist/antd.min.css"

然后我们在文档 右上方 找到组件

左侧菜单上就有很多组件 例如 button按钮

这里比如 我们想用button按钮
我们在左侧点击 他
然后进入这个界面

我们点击箭头指向处 即可查看源代码

这里最重要的就是 import { Button } from ‘antd’;
为我们组件引入 了 antd下的 button组件 还有就是他的标签代码
于是 我们在自己的组件下编写代码如下

import './App.css';
import React from "react";
import {
    
     Button } from 'antd';

class App extends React.Component{
    
    
  constructor(props){
    
    
    super(props);
    this.state = {
    
    
    }
  }
 
  render(){
    
    
    return (
      <div className="App">
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <br />
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </div>
    )
  }
}

export default App;

没有任何问题

具体的很多组件 大体就是这么使用的
每一种组件拉到下面都会有具体用法属性的讲解