React-UI組件庫

1、常用的React UI組件

1.1眨攘、React Material-UI介紹

React 組件用于更快速已慢、更簡便的 web 開發(fā)苞尝。你也可以建立你自己的設(shè)計系統(tǒng)，或者從 Material Design 開始访惜。

Material-UI 是一個使用 MIT 許可證的開源項目嘹履。可能完全因為這些超棒的 backers，這個項目不斷的在開發(fā)

1.2债热、React-Bootstrap介紹

React-Bootstrap是可重用的前端組件庫砾嫉。樣式組件依賴于bootstrap。與 Twitter Bootstrap 一致外觀與感受窒篱，但通過 Facebook 的 React.js 框架獲得更清爽的代碼

1.3焕刮、ant-design介紹

Ant Design 螞蟻框架（螞蟻設(shè)計）

antd 是基于 Ant Design 設(shè)計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品

特點：開箱即用的高質(zhì)量 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>

根據(jù)api加入相應(yīng)的功能，比如點擊事件嫉髓，size大小观腊，href當(dāng)成a鏈接使用，通過type類型調(diào)節(jié)顏色算行。

2.2恕沫、Antd-design 使用圖標(biāo)icon

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

2.3、Tag標(biāo)簽的引入

第一步引入組件樣式纱意，以及解構(gòu)Tag標(biāo)簽

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

通過使用的API來認(rèn)識tag標(biāo)簽的使用方式婶溯。

2.4、自動生成不同顏色標(biāo)簽案例

通過api寫一個小案例偷霉，定義6種顏色迄委，在頁面上有一個開始按鈕，點擊開始按鈕時类少，頁面隨機生成Tag標(biāo)簽叙身，標(biāo)簽的顏色也是對應(yīng)的Tag，生成在constructor中定義一個狀態(tài)硫狞，里面寫幾個隨機顏色信轿，定義一個空數(shù)組colorarr晃痴。

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

當(dāng)觸發(fā)onClick方法時觸發(fā)click方法

click() {
    // 創(chuàng)建一個定時器
    this.time = setInterval(()=>{
        // 隨機生成一個數(shù)字 0-5
        let count = Math.round(Math.random()*5)
        console.log(count)
        // 在數(shù)組中取到顏色，通過生成的數(shù)字
        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狀態(tài)中定義一個value值即彪，默認(rèn)為0

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

在render方法中紧唱，定義一個循環(huán)加星的按鈕，加一個loop方法隶校，根據(jù)Rate評分組件api漏益，加入自動獲取交點autoFocus onKeyDown鍵盤事件星星的總數(shù)，鼠標(biāo)懸停觸發(fā)事件深胳，以及當(dāng)前的星數(shù)

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

當(dāng)鼠標(biāo)懸停時绰疤，觸發(fā)事件，頁面的星數(shù)隨著懸停在幾顆星舞终，就為幾顆星

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

當(dāng)點擊開始按鈕時峦睡，觸發(fā)loop事件，將組件加入一個周期性定時器权埠，將星數(shù)每0.2秒中自動加一顆星榨了，當(dāng)星數(shù)為20時，星數(shù)變?yōu)?攘蔽，一直循環(huán)加星

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

當(dāng)觸發(fā)kd方法時龙屉，為鼠標(biāo)按下事件，鼠標(biāo)按右鍵時满俗，觸發(fā)鍵盤碼39转捕，按下一次星數(shù)長半顆星，按下左鍵時唆垃，觸發(fā)鍵盤碼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
    })
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者