介绍：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：根据文档教程
打开任意一个新建的组件
先引入全局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;
