快捷導(dǎo)航

React使用Ant Design方式(簡單使用)

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

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

React使用Ant Design方式

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

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

Ant Design特性

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

話不多說，快速上手

我們首先先下載 antd 組件庫。

npm install antd --save

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

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")
);

效果圖：

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

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

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

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

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

點(diǎn)擊右上角的復(fù)制代碼，復(fù)制到我們的頁面中，導(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號',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: 'Conmment內(nèi)容',
                dataIndex: 'conmment',
                key: 'conmment',
            },
            {
                title: 'time時(shí)間',
                dataIndex: 'time',
                key: 'time',
            },
            {
                title: 'Done等級',
                key: 'done',
                dataIndex: 'done',
                render: done => (
                    <>
                        {done === 0 ? <Tag color="magenta">一級</Tag> :
                            done === 1 ? <Tag color="gold">二級</Tag> :
                                <Tag color="blue">三級</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="你是否真正的要刪除這條數(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>
                ),
            },
        ],

        // 是否打開添加對話框
        visible: false,

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

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

        //是否打開修改的對話框
        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ù)對話框
    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)閉對話框
    hideModelout() {
        message.warning('取消此操作！')
        this.setState({ visible: false })
        this.setState({ visible1: false })
    }

    //監(jiān)測表單添加時(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)擊修改按鈕 打開對話框
    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 })
        }
    }

    //提交修改請求
    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ù)對話框 */}
                <Modal
                    title="添加數(shù)據(jù)"
                    // 根據(jù)狀態(tài)是否顯示對話框
                    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="請輸入主要內(nèi)容" onChange={this.ch.bind(this, 'conmment')} />
                        </Form.Item>
                        <Form.Item label="Done" >
                            <Input placeholder="請輸入等級(0:等級一,1：等級二,2：等級三)" onChange={this.ch.bind(this, 'done')} />
                        </Form.Item>
                    </Form>



                </Modal>

                {/* 修改數(shù)據(jù)的對話框 */}
                <Modal
                    title="添加數(shù)據(jù)"
                    // 根據(jù)狀態(tài)是否顯示對話框
                    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="請輸入主要內(nèi)容" onChange={this.ch2.bind(this, 'conmment')} />
                        </Form.Item>
                        <Form.Item label="Done" name='done'>
                            <Input placeholder="請輸入等級(0:等級一,1：等級二,2：等級三)" onChange={this.ch2.bind(this, 'done')} />
                        </Form.Item>
                    </Form>


                </Modal>


            </div>
        );
    }
}

export default Tabless;

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