React使用Ant Design方式(简单使用)
作者：随笔写
文章介绍了AntDesign组件库,它是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品,文章详细讲解了如何下载和按需引入antd组件库,并通过一个小案例展示了如何使用antd进行布局和改造,最后,文章提醒大家在使用过程中可以参考官网的属性介绍
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;
然后启动我们的项目：
最后，在官网的最下方还会有一些属性的介绍，如果有需要修改的属性可以参考。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。