快捷導(dǎo)航

React使用Ant Design方式(簡(jiǎn)單使用)

更新時(shí)間：2024年11月11日 08:57:49 作者：隨筆寫

文章介紹了AntDesign組件庫(kù),它是基于AntDesign設(shè)計(jì)體系的ReactUI組件庫(kù),主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品,文章詳細(xì)講解了如何下載和按需引入antd組件庫(kù),并通過一個(gè)小案例展示了如何使用antd進(jìn)行布局和改造,最后,文章提醒大家在使用過程中可以參考官網(wǎng)的屬性介紹

React使用Ant Design方式

在這里介紹一下，這個(gè)Ant Design組件庫(kù) 是與我們的 element 組件是一樣的，使用方法大致相似。

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

Ant Design特性

提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺風(fēng)格。
開箱即用的高質(zhì)量 React 組件。
使用 TypeScript 開發(fā)，提供完整的類型定義文件。
全鏈路開發(fā)和設(shè)計(jì)工具體系。
數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
深入每個(gè)細(xì)節(jié)的主題定制能力。

話不多說(shuō)，快速上手

我們首先先下載 antd 組件庫(kù)。

npm install antd --save

以下代碼是根據(jù)我們的需求來(lái)按需引入。

import React from "react";
import ReactDOM from "react-dom";
import { Button, DatePicker, version } from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    <DatePicker />
    <Button type="primary" style={{ marginLeft: 8 }}>
      Primary Button
    </Button>
  </div>,
  document.getElementById("root")
);

效果圖：

來(lái)看一下做的一個(gè)小案例

我們項(xiàng)目的大致結(jié)構(gòu)：

可以看到有很多的布局方式。

我們選取其中一個(gè)，點(diǎn)擊<>。

可以展開相應(yīng)布局的代碼。

點(diǎn)擊右上角的復(fù)制代碼，復(fù)制到我們的頁(yè)面中，導(dǎo)入相應(yīng)的依賴包，然后稍加進(jìn)行改造。(注意綠色粗體加大的部分的區(qū)別)

import React, { Component } from 'react';
import Table from '../Table/Table'
import './List.css'

import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


class List extends Component {
    render() {
        return (
            <div className="List">

                <Layout>
                    <Header className="header">
                        <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background">
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                }}>
                                <Table />
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>

            </div>
        );
    }
}

export default List;

import React, { Component } from 'react';
import {
    Table, Tag, Space, Button, message, Popconfirm, Modal, Input, Form
} from 'antd';

import { getList } from '../../Api/Api'

class Tabless extends Component {
    state = {
        //獲取的數(shù)據(jù)列表
        list: [],

        // 列表的配置
        columns: [
            {
                title: 'Id號(hào)',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: 'Conmment內(nèi)容',
                dataIndex: 'conmment',
                key: 'conmment',
            },
            {
                title: 'time時(shí)間',
                dataIndex: 'time',
                key: 'time',
            },
            {
                title: 'Done等級(jí)',
                key: 'done',
                dataIndex: 'done',
                render: done => (
                    <>
                        {done === 0 ? <Tag color="magenta">一級(jí)</Tag> :
                            done === 1 ? <Tag color="gold">二級(jí)</Tag> :
                                <Tag color="blue">三級(jí)</Tag>}
                    </>
                )
            },
            {
                title: 'Action操作',
                key: 'action',
                render: (spcord) => (
                    <Space size="middle">
                        <Button type='primary' size='small' onClick={this.edit_dhk.bind(this, spcord)}>修改</Button>
                        {/* 氣泡確認(rèn)框 */}
                        <Popconfirm
                            title="你是否真正的要?jiǎng)h除這條數(shù)據(jù)?"
                            onConfirm={this.del.bind(this, spcord.id)}
                            onCancel={this.no_.bind(this)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type='danger' size='small' >刪除</Button>
                        </Popconfirm>
                    </Space>
                ),
            },
        ],

        // 是否打開添加對(duì)話框
        visible: false,

        //定義添加的數(shù)據(jù)表單
        fromList: {
            conmment: '',
            done: 0
        },

        //暫時(shí)獲取修改數(shù)據(jù)的對(duì)象
        edit_from: {},

        //是否打開修改的對(duì)話框
        visible1: false
    }

    componentDidMount() {
        this.hqsj()
    }

    //獲取數(shù)據(jù)
    async hqsj() {
        const { data: msg } = await getList('resu/', 'get')
        console.log(msg.data);
        this.setState({ list: msg.data })
    }

    //刪除數(shù)據(jù)
    async del(id) {
        const { data: msg } = await getList('resu/', 'delete', { id: id })
        console.log(msg);
        if (msg.code === 200) {
            message.success('刪除成功！')
            this.hqsj()
        }

    }

    //取消刪除
    no_() {
        message.warning('取消刪除！')
    }

    //打開添加數(shù)據(jù)對(duì)話框
    dhk() {
        this.setState({ visible: true })
    }

    //添加數(shù)據(jù)確定按鈕
    async hideModal() {
        const { data: msg } = await getList('resu/', 'post', this.state.fromList)
        console.log(msg);
        if (msg.code === 200) {
            message.success('添加成功')
            this.setState({ visible: false })
            this.hqsj()
        }
    }

    //添加數(shù)據(jù)取消按鈕 關(guān)閉對(duì)話框
    hideModelout() {
        message.warning('取消此操作！')
        this.setState({ visible: false })
        this.setState({ visible1: false })
    }

    //監(jiān)測(cè)表單添加時(shí) 賦值給state
    ch(n, e) {
        if (n === 'conmment') {
            var fromList1 = this.state.fromList
            fromList1.conmment = e.target.value
            this.setState({ fromList: fromList1 })
        } else {
            var fromList1 = this.state.fromList
            fromList1.done = e.target.value
            this.setState({ fromList: fromList1 })
        }
    }

    //點(diǎn)擊修改按鈕 打開對(duì)話框
    edit_dhk(item) {
        console.log(item);
        this.setState({ edit_from: item })
        this.state.visible1 = true
    }

    ch2(n, e) {
        if (n === 'conmment') {
            var edit_from1 = this.state.edit_from
            edit_from1.conmment = e.target.value
            this.setState({ edit_from: edit_from1 })
        } else {
            var edit_from1 = this.state.edit_from
            edit_from1.done = e.target.value
            this.setState({ edit_from: edit_from1 })
        }
    }

    //提交修改請(qǐng)求
    async edit_ok() {
        const { data: msg } = await getList('resu/', 'post', this.state.edit_from)
        if (msg.code === 200) {
            message.success('修改成功！')
            this.state.visible1 = false
            this.hqsj()
        }
    }

    render() {
        return (
            <div>
                <Button type='primary' style={{ margin: "20px 0" }} onClick={this.dhk.bind(this)}>添加數(shù)據(jù)</Button>
                {/* 數(shù)據(jù)表格 */}
                <Table columns={this.state.columns} dataSource={this.state.list} rowKey={rec => rec.id} />

                {/* 添加數(shù)據(jù)對(duì)話框 */}
                <Modal
                    title="添加數(shù)據(jù)"
                    // 根據(jù)狀態(tài)是否顯示對(duì)話框
                    visible={this.state.visible}

                    onOk={this.hideModal.bind(this)}
                    onCancel={this.hideModelout.bind(this)}
                    okText="確認(rèn)"
                    cancelText="取消"
                >

                    {/* 表單 */}
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ paddingRight: "87px", boxSizing: "border-box" }}
                    >
                        <Form.Item label="Conmment" >
                            <Input placeholder="請(qǐng)輸入主要內(nèi)容" onChange={this.ch.bind(this, 'conmment')} />
                        </Form.Item>
                        <Form.Item label="Done" >
                            <Input placeholder="請(qǐng)輸入等級(jí)(0:等級(jí)一,1：等級(jí)二,2：等級(jí)三)" onChange={this.ch.bind(this, 'done')} />
                        </Form.Item>
                    </Form>



                </Modal>

                {/* 修改數(shù)據(jù)的對(duì)話框 */}
                <Modal
                    title="添加數(shù)據(jù)"
                    // 根據(jù)狀態(tài)是否顯示對(duì)話框
                    visible={this.state.visible1}

                    onOk={this.edit_ok.bind(this)}
                    onCancel={this.hideModelout.bind(this)}
                    okText="確認(rèn)"
                    cancelText="取消"
                >

                    {/* 表單 */}
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ paddingRight: "87px", boxSizing: "border-box" }}
                        initialValues={this.state.edit_from}
                    >
                        <Form.Item label="Conmment" name='conmment'>
                            <Input placeholder="請(qǐng)輸入主要內(nèi)容" onChange={this.ch2.bind(this, 'conmment')} />
                        </Form.Item>
                        <Form.Item label="Done" name='done'>
                            <Input placeholder="請(qǐng)輸入等級(jí)(0:等級(jí)一,1：等級(jí)二,2：等級(jí)三)" onChange={this.ch2.bind(this, 'done')} />
                        </Form.Item>
                    </Form>


                </Modal>


            </div>
        );
    }
}

export default Tabless;

然后啟動(dòng)我們的項(xiàng)目：