React-UI组件库

1、常用的React UI组件

1.1、React Material-UI介绍

React 组件用于更快速、更简便的 web 开发。你也可以建立你自己的设计系统，或者从 Material Design 开始。

Material-UI 是一个使用 MIT 许可证的开源项目。可能完全因为这些超棒的 backers，这个项目不断的在开发

1.2、React-Bootstrap介绍

React-Bootstrap是可重用的前端组件库。样式组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受，但通过 Facebook 的 React.js 框架获得更清爽的代码

1.3、ant-design介绍

Ant Design 蚂蚁框架（蚂蚁设计）

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品

特点：开箱即用的高质量 React 组件。

2、ant-design安装以及按需使用

2.1、ant-design安装

安装依赖 cnpm install antd -S
按需引入 import { Button } from 'antd'，可以使用Button组件
引入样式 import 'antd/dist/antd.css'
在组件render方法中，使用Button

<Button size="small" disabled href="#123" onClick={()=>{this.click()}} type="danger">button</Button>

根据api加入相应的功能，比如点击事件，size大小，href当成a链接使用，通过type类型调节颜色。

2.2、Antd-design 使用图标icon

import { Button,Icon } from 'antd'
<Icon spin twoToneColor="blue" style={{fontSize:"30px",color:"red"}} type="aliwangwang" />

2.3、Tag标签的引入

第一步引入组件样式，以及解构Tag标签

import { Tag } from 'antd';
import 'antd/dist/antd.css'

通过使用的API来认识tag标签的使用方式。

2.4、自动生成不同颜色标签案例

通过api写一个小案例，定义6种颜色，在页面上有一个开始按钮，点击开始按钮时，页面随机生成Tag标签，标签的颜色也是对应的Tag，生成在constructor中定义一个状态，里面写几个随机颜色，定义一个空数组colorarr。

<Button onClick={()=>{this.click()}}>开始</Button>
{
    this.state.colorarr.map((item)=>{
        return (
            <Tag color={item}>{item}</Tag>
        )
    })
}

当触发onClick方法时触发click方法

click() {
    // 创建一个定时器
    this.time = setInterval(()=>{
        // 随机生成一个数字 0-5
        let count = Math.round(Math.random()*5)
        console.log(count)
        // 在数组中取到颜色，通过生成的数字
        let str = this.state.color[count]
        // 将取到的颜色放入colorarr 中
        this.state.colorarr.push(str)
        this.setState({colorarr:this.state.colorarr})
    },100)
}

2.5、Rate评分的基本用法

按需引入antd中的Rate组件，在render方法中，jsx渲染Rate组件

import { Rate } from 'antd';

ReactDOM.render(<Rate />, mountNode);

State状态中定义一个value值，默认为0

constructor() {
    super()
    this.state = {
        value:0
    }
}

在render方法中，定义一个循环加星的按钮，加一个loop方法，根据Rate评分组件api，加入自动获取交点autoFocus onKeyDown键盘事件星星的总数，鼠标悬停触发事件，以及当前的星数

render() {
    return (
        <div>
            <h3>rate</h3>
            <button onClick={()=>{this.loop()}}>循环加星</button>
            <Rate autoFocus onKeyDown={(e)=>{this.kd(e)}} count="20" onHoverChange={(e)=>{this.change(e)}} value={this.state.value} allowHalf></Rate>
        </div>
    )
}

当鼠标悬停时，触发事件，页面的星数随着悬停在几颗星，就为几颗星

change(e) {
    console.log(e)
    this.setState({value:e})
}

当点击开始按钮时，触发loop事件，将组件加入一个周期性定时器，将星数每0.2秒中自动加一颗星，当星数为20时，星数变为0，一直循环加星

loop() {
    this.time = setInterval(()=>{
        if(this.state.value == 20){
            this.state.value = 0
        }
        this.state.value ++
        this.setState({value:this.state.value})
    },200)
}

当触发kd方法时，为鼠标按下事件，鼠标按右键时，触发键盘码39，按下一次星数长半颗星，按下左键时，触发键盘码37，每一次按键减少半颗星

kd(e) {
    if(e.keyCode == 39){
        this.state.value +=0.5
    }
    if(e.keyCode == 37){
        this.state.value -=0.5
    }
    this.setState({
        value:this.state.value
    })
}