React全家桶+共享单车实战开发-—— 5 Andt UI组件-优快云博客

本文链接：https://blog.youkuaiyun.com/wgf5845201314/article/details/99182688

本文详细介绍React中各种UI组件的实战应用，包括按钮、弹框、加载中、通知提醒、全局提示框、页签等，通过具体代码示例展示组件的配置与使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请参考： https://blog.youkuaiyun.com/qq_34235864/article/details/86583395

https://blog.youkuaiyun.com/qq_34829447/article/details/81977779

实战内容：

一、按钮Button

pages->ui->button.js：对应路由/admin/ui/buttons

import React from 'react'
import {Card, Button,Radio} from 'antd'
import './ui.less'
export default class Buttons extends React.Component{

    state={
        loading: true,
        size:'default'
    }
    handleCloseLoading=()=>{
        this.setState({
            loading: false
        });
    }
    handleChange=(e)=>{
        this.setState({
            size: e.target.value
        })
    }
    render(){
        return (
                <div>
                    <Card title={<div style={{textAlign:"left"}}>基础按钮</div>} className="card-wrap">
                        <Button type="primary">Imooc</Button>
                        <Button>Imooc</Button>
                        <Button type="dashed">Imooc</Button>
                        <Button type="danger">Imooc</Button>
                        <Button disabled>Imooc</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>图形按钮</div>} className="card-wrap">
                        <Button icon="plus">创建</Button>
                        <Button icon="edit">编辑</Button>
                        <Button icon="delete">删除</Button>
                        <Button shape="circle" icon="search"></Button>
                        <Button type="primary" icon="search">搜索</Button>
                        <Button type="primary" icon="download">下载</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>loading按钮</div>} className="card-wrap">
                        <Button type="primary" loading={this.state.loading}>确定</Button>
                        <Button type="primary" shape="circle" loading={this.state.loading}></Button>
                        <Button loading={this.state.loading}>点击加载</Button>
                        <Button shape="circle" loading={this.state.loading}></Button>
                        <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>按钮组</div>} style={{marginBottom:10}}>
                        <Button.Group>
                            <Button type="primary" icon="left">返回</Button>
                            <Button type="primary" icon="right">前进</Button>
                        </Button.Group>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>按钮尺寸</div>} className="card-wrap">
                        <Radio.Group value={this.state.size} onChange={this.handleChange}>
                            <Radio value="small">小</Radio>
                            <Radio value="default">中</Radio>
                            <Radio value="large">大</Radio>
                        </Radio.Group>
                        <Button type="primary" size={this.state.size}>Imooc</Button>
                        <Button size={this.state.size}>Imooc</Button>
                        <Button type="dashed" size={this.state.size}>Imooc</Button>
                        <Button type="danger" size={this.state.size}>Imooc</Button>
                    </Card>

                </div>
        );
    }
}

二、弹框Modal

pages->ui->modals：对应路由/admin/ui/modals

import React from 'react'
import {Card , Button, message, Icon, Tabs} from 'antd'
import './ui.less'
import { spawn } from 'child_process';
const TabPane = Tabs.TabPane;
export default class Messages extends React.Component{

    componentWillMount(){
        const panes = [
            {
                title: 'Tab 1',
                content: '欢迎使用Tab 1页签',
                key: '1'
            },
            {
                title: 'Tab 2',
                content: '欢迎使用Tab 2页签',
                key: '2'
            },
            {
                title: 'Tab 3',
                content: '欢迎使用Tab 3页签',
                key: '3'
            }
        ]
        this.setState({
            panes
        })
    }

    handleCallback = (key)=>{
        message.info("Hi,您选择了页签："+key)
    }    
    render(){
        return (
            <div>
                <Card title="Tab页签" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
                        <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图标的页签" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"/>Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab={<span><Icon type="edit"/>Tab 2</span>} key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>Tab 3</span>} key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab动态的页签" className='card-wrap'>
                <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                    {
                        this.state.panes.map((panel)=>{
                            return <TabPane 
                                tab={panel.title}
                                key={panel.key}
                            />
                        })
                    }
                </Tabs>
                </Card>
            </div>
        )
    }
}

三、加载中Spin　

pages->ui->loadings：对应路由/admin/ui/loadings

import React from 'react'
import {Card , Button, Spin, Icon, Alert} from 'antd'
import './ui.less'
export default class Loadings extends React.Component{

    render(){
        const icon = <Icon type="loading" style={{fontSize:24}}></Icon>
        return (
            <div>
                 <Card title={<div style={{textAlign:"left"}}>Spin用法</div>} className="card-wrap">
                    <Spin size="small"></Spin>
                    <Spin style={{margin:'0 10px'}}></Spin>
                    <Spin size="large"></Spin>
                    <Spin indicator={icon} style={{marginLeft:10}}></Spin>
                </Card>  
                <Card title={<div style={{textAlign:"left"}}>内容遮罩</div>} className="card-wrap">
                    <Alert
                        message = "React"
                        description="欢迎来到React高级教程"
                        type="info"
                    ></Alert>
                     <Alert
                        message = "React"
                        description="欢迎来到React高级教程"
                        type="warning"
                    ></Alert>
                    <Spin>
                        <Alert
                            message = "React"
                            description="欢迎来到React高级教程"
                            type="warning"
                        ></Alert>
                    </Spin>
                    <Spin indicator={icon} tip="加载中...">
                        <Alert
                            message = "React"
                            description="欢迎来到React高级教程"
                            type="warning"
                        ></Alert>
                    </Spin>
                </Card>  
            </div>
        )
    }
}

四、通知提醒Notification　　

pages->ui->notice.js：对应路由/admin/ui/notification

import React from 'react'
import {Card , Button,Radio, Spin, Icon, Alert, notification} from 'antd'
import './ui.less'
export default class Notice extends React.Component{
    openNotification = (type,direction)=>{
        if(direction){
            notification.config({
                placement: direction
            })
        }
        notification[type]({
            message:'发工资了',
            description:'上个月考勤22天, 迟到12天，实发工资250，请笑纳'
        })
    }
    render(){
        return (
            <div>
                <Card title="通知提醒框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.openNotification('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.openNotification('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.openNotification('warning')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.openNotification('error')}>Error</Button>
                </Card>
                <Card title="不同位置的通知提醒框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.openNotification('success','topLeft')}>Success</Button>
                    <Button type="primary" onClick={()=>this.openNotification('info','topRight')}>Info</Button>
                    <Button type="primary" onClick={()=>this.openNotification('warning','bottomLeft')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.openNotification('error','bottomRight')}>Error</Button>
                </Card>
            </div>
        );
    }
}

五、全局提示框Message　　

pages->ui->messages：对应路由/admin/ui/messages

import React from 'react'
import {Card , Button, message} from 'antd'
import './ui.less'
export default class Messages extends React.Component{

    showMessage=(type)=>{
        message[type]('恭喜你，React 课程晋级成功');
    }

    render(){
        return(
            <div>
                <Card title="全局提示框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.showMessage('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.showMessage('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.showMessage('warning')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.showMessage('error')}>Error</Button>
                    <Button type="primary" onClick={()=>this.showMessage('loading')}>Loading</Button>
                </Card>
            </div>
        )
    }
}

六、页签Tab　　

pages->ui->tabs.js：对应路由/admin/ui/tabs

import React from 'react'
import {Card , Button, message, Icon, Tabs} from 'antd'
import './ui.less'
import { spawn } from 'child_process';
const TabPane = Tabs.TabPane;
export default class Messages extends React.Component{

    componentWillMount(){
        const panes = [
            {
                title: 'Tab 1',
                content: '欢迎使用Tab 1页签',
                key: '1'
            },
            {
                title: 'Tab 2',
                content: '欢迎使用Tab 2页签',
                key: '2'
            },
            {
                title: 'Tab 3',
                content: '欢迎使用Tab 3页签',
                key: '3'
            }
        ]
        this.setState({
            activeKey: panes[0].Key,
            panes
        })
    }

    handleCallback = (key)=>{
        message.info("Hi,您选择了页签："+key)
    }    
    onChange=(activeKey)=>{
        this.setState({
            activeKey
        })
    }
    onEdit=(targetKey,action)=>{
        this[action](targetKey);
    }
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
        this.setState({ panes, activeKey });
    }
    //activeKey:当前激活的key, targetKey:当前删除的Key
    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
          activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    render(){
        return (
            <div>
                <Card title="Tab页签" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
                        <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图标的页签" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"/>Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab={<span><Icon type="edit"/>Tab 2</span>} key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>Tab 3</span>} key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab动态的页签" className='card-wrap'>
                <Tabs 
                    onChange={this.onChange}
                    activeKey={this.state.activeKesy}
                    // defaultActiveKey="1" 
                    // onChange={this.handleCallback}
                    type="editable-card"
                    onEdit={this.onEdit}
                >
                    {
                        this.state.panes.map((panel)=>{
                            return <TabPane 
                                tab={panel.title}
                                key={panel.key}
                            />
                        })
                    }
                </Tabs>
                </Card>
            </div>
        )
    }
}