React如何使用 Ant Design(简单使用)

在这里介绍一下，这个Ant Design组件库 是与我们的 element 组件是一样的，使用方法大致相似。
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

Ant Design特性！

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

话不多说，快速上手！
我们首先先下载 antd 组件库。

npm install antd --save

以下代码是根据我们的需求 来按需引入。

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

效果图：

来看一下做的一个小案例
我们项目的大致结构：

可以看到有很多的布局方式。我们选取其中一个，点击<>。

可以展开相应布局的代码。

点击右上角的复制代码，复制到我们的页面中，导入相应的依赖包，然后稍加进行改造。(注意绿色粗体加大的部分的区别)

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 = {
        //获取的数据列表
        list: [],

        // 列表的配置
        columns: [
            {
                title: 'Id号',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: 'Conmment内容',
                dataIndex: 'conmment',
                key: 'conmment',
            },
            {
                title: 'time时间',
                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>
                        {/* 气泡确认框 */}
                        <Popconfirm
                            title="你是否真正的要删除这条数据?"
                            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,

        //定义添加的数据表单
        fromList: {
            conmment: '',
            done: 0
        },

        //暂时获取修改数据的对象
        edit_from: {},

        //是否打开修改的对话框
        visible1: false
    }

    componentDidMount() {
        this.hqsj()
    }

    //获取数据
    async hqsj() {
        const { data: msg } = await getList('resu/', 'get')
        console.log(msg.data);
        this.setState({ list: msg.data })
    }

    //删除数据
    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('取消删除！')
    }

    //打开添加数据对话框
    dhk() {
        this.setState({ visible: true })
    }

    //添加数据确定按钮
    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()
        }
    }

    //添加数据取消按钮 关闭对话框
    hideModelout() {
        message.warning('取消此操作！')
        this.setState({ visible: false })
        this.setState({ visible1: false })
    }

    //监测表单添加时 赋值给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 })
        }
    }

    //点击修改按钮 打开对话框
    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)}>添加数据</Button>
                {/* 数据表格 */}
                <Table columns={this.state.columns} dataSource={this.state.list} rowKey={rec => rec.id} />

                {/* 添加数据对话框 */}
                <Modal
                    title="添加数据"
                    // 根据状态是否显示对话框
                    visible={this.state.visible}

                    onOk={this.hideModal.bind(this)}
                    onCancel={this.hideModelout.bind(this)}
                    okText="确认"
                    cancelText="取消"
                >

                    {/* 表单 */}
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ paddingRight: "87px", boxSizing: "border-box" }}
                    >
                        <Form.Item label="Conmment" >
                            <Input placeholder="请输入主要内容" 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>

                {/* 修改数据的对话框 */}
                <Modal
                    title="添加数据"
                    // 根据状态是否显示对话框
                    visible={this.state.visible1}

                    onOk={this.edit_ok.bind(this)}
                    onCancel={this.hideModelout.bind(this)}
                    okText="确认"
                    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="请输入主要内容" 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;

然后启动我们的项目：

最后，在官网的最下方还会有一些属性的介绍，如果有需要修改的属性可以参考。