从零开始学习React-引入Ant Design 组件（八）

王小婷

发布于 2019-11-21 12:39:05

1.5K0

发布于 2019-11-21 12:39:05

文章被收录于专栏：编程微刊编程微刊

React中使用Antd教程文档： https://ant.design/docs/react/getting-started-cn

介绍：antd 是基于 Ant Design 设计体系的 React UI 组件库,一个方便极速开发应用的插件，这些相当于帮我们封装了常用的组件，我们直接拿来用就行。

步骤

1：安装Antd

cnpm  install  antd --save

2：全局css样式

在react项目的css文件里面引入Antd的css

@import '~antd/dist/antd.css';

我这里是在app.css里面

3：根据文档教程

https://ant.design/docs/react/use-with-create-react-app-cn 打开任意一个新建的组件先引入全局css样式：

import '../asset/css/App.css';

再引入需要用到文档里面的按钮组件

import Button from 'antd/es/button';

在render()模板里面，复制按钮组件

    render() {
        return (
            <div>
            <Button type="primary">Button</Button>                      
            </div>
        )
    }

最简单的按钮就实现啦

import React, { Component } from 'react';
//引入Antd
import Button from 'antd/es/button';
import '../asset/css/App.css';
class News extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
            
        }
    }
    render() {
        return (
            <div>           
            <Button type="primary">Button</Button>                      
            </div>
        )
    }
}
export default News;

这个时候就可以看到了按钮啦，这是最简单基本的操作哦，后续会更新更多关于Antd这个框架的文章，因为用起来还是很顺利的哦。

继续使用一些评分组件

import React, { Component } from 'react';
//引入Antd

import '../asset/css/App.css';

import { Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
class News extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
            value: 3,
        }
    }

    handleChange = value => {
        this.setState({ value });
      };

    render() {
    const { value } = this.state;
    return (
      <span>
        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
      </span>
    );
  }
}
export default News;