在這里介紹一下，這個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"><Menumode="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><ContentclassName="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>{/* 氣泡確認框 */}<Popconfirmtitle="你是否真正的要刪除這條數據?"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 })}//監測表單添加時 賦值給statech(n, e) {if (n === 'conmment') {var fromList1 = this.state.fromListfromList1.conmment = e.target.valuethis.setState({ fromList: fromList1 })} else {var fromList1 = this.state.fromListfromList1.done = e.target.valuethis.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_fromedit_from1.conmment = e.target.valuethis.setState({ edit_from: edit_from1 })} else {var edit_from1 = this.state.edit_fromedit_from1.done = e.target.valuethis.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 = falsethis.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} />{/* 添加數據對話框 */}<Modaltitle="添加數據"// 根據狀態是否顯示對話框visible={this.state.visible}onOk={this.hideModal.bind(this)}onCancel={this.hideModelout.bind(this)}okText="確認"cancelText="取消">{/* 表單 */}<Formname="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>{/* 修改數據的對話框 */}<Modaltitle="添加數據"// 根據狀態是否顯示對話框visible={this.state.visible1}onOk={this.edit_ok.bind(this)}onCancel={this.hideModelout.bind(this)}okText="確認"cancelText="取消">{/* 表單 */}<Formname="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;

然后啟動我們的項目：

最后，在官網的最下方還會有一些屬性的介紹，如果有需要修改的屬性可以參考。

總結

以上是生活随笔為你收集整理的React如何使用 Ant Design(简单使用)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。