Ant-Design 官方文档

Ant-Design-Pro 官方文档

那些用 AntDesign 走过的坑 & 经验

Form 篇

当需要获取填写的数据并对其进行校验时, 需要用到的这个组件

一般的表单提交需要增加字段的验证, 如果不进行校验的话, 会导致一些问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
class Example extends React.Component {
handleSubmit = (e) => {
e.preventDefault()
this.props.form.validateFields((err, values) => {
if (err) {

} else {
// 整理数据格式
let body = {
...values
}
// 派发请求
this.props.dispatch({
type: '',
payload: {
// 接口需要的参数
body,
// 成功后执行的回调函数
callback: () => {
message.success('Request Success')
this.props.history.goBack()
}
}
})
}
})
}

render () {
let { getFieldDecorator } = this.props.form
return (
<Form
onSubmit={this.handleSubmit}
style={{ padding: 15 }}
autoComplete="off"
>
<Form.Item label={'name'}>
// getFieldDecorator(id, options)
{getFieldDecorator('name', {
rules: [
// 必填项, 如果不填就会警告, 警告 message 中的内容
{
required: true,
message: 'please input name'
}
],
initialValue: ''
})(<Input placeholder='example' />)}
</Form.Item>
</Form>
)
}
}

export default Form.create()(Example)

Table 篇

当 table 中的项过于多, 导致换行的时候, 可以试着用带滚动效果的 table

只需要给两侧的选项定位, 表格设置 scroll 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const columns = [
{
title: 'Full Name', dataIndex: 'name', key: 'name', width: 100,
// 列是否固定, left / right
fixed: 'left'
},
// 中间的会出现滑动效果
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
// ...
{
title: 'Action', key: 'operation', width: 100, render: () => <a>action</a>,
fixed: 'right'
}
];

<Table
columns={columns}
dataSource={data}
// 表格是否可滚动, x 横向, y 纵向, scrollToFirstRowOnChange 当分页、排序、筛选变化后是否滚动到表格顶部
scroll={{ x: 1300 }}
/>

rowKey & key

你可以给每一个 columns 的选项加 key, 也可以直接在 table 中给一个 rowKey, 一般会用 id 作为 key, 但是当 id 所在层级能直接获取的时候, 直接 . 的话会有问题, 所以需要给 rowKey 一个函数

1
2
3
4
5
6
<Table
// 没有层级问题时, 直接使用就行了
rowKey={'id'}
// 如果有层级关系, rowKey 需要用一个函数
rowKey={record => reocrd.xxx.id}
/>

注意: 不管使用哪种方式来给它加 key, 一定要记得加上, 否则会报一个警告; 如果使用了 dataIndex 后, key 可以省略

1
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render...

dataIndex & render

首先如果只用 dataIndex 的话, 它渲染的是 dataIndex 的数据, 并不会做一个格式的处理, 而使用 render 的话, 可以给该数据加上一个属性, 另外, 如果只是渲染数据就用 dataIndex 即可, dataIndex 支持 ‘xx.xx.xx’, 而如果要进一步处理的话, 使用 render, 只需要确定数据要怎么处理, 两者使用一个即可

1
2
3
4
5
6
7
8
9
10
const columns = [
{
title: 'Name',
key: 'name',
// 渲染的就是 name.id 的数据
dataIndex: 'name.id',
// 渲染复杂的数据, text 当前行的值, record 当前行数据, index 行索引
render: (text, record, index) => <div>{record.id}</div>
}
]

Tabs 篇

Tabs 页签的附加操作

tabs 页签的属性是加给 tabs 上的, 所以每一个页签上都会有这个附加操作, 如果当向让页签的附加操作在指定的页签上显示, 需要给这个属性传一个回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { Tabs, Button } from 'antd';
const { TabPane } = Tabs;
class Tasks extends React.Component {
constructor (props) {
super(props)
this.state = {
// 表示当前 tabpane 的 key
paneKey: '1'
}
}

// 改变 state 中的 paneKey, 指向当前的 tabpane
onChangePane = (e) => {
this.setState({
paneKey: e
})
}
// 页签附加属性的回调函数, 用这个来做判断页签附加属性的显示隐藏
createBarExtraContent = () => {
// 只有当 tabpane 的 key 为 1 时 才显示对应的附加属性
if (this.state.paneKey === '1') {
return <Button type='primary' size='default'>Ops</Button>
}
// 同上
if (this.state.paneKey === '3') {
return <Button size='default'>Wow</Button>
}
}

render () {
return (<div style={{ margin: '20px' }}>
<Tabs
defaultActiveKey="1"
onChange={this.onChangePane}
// 该属性是给 tabs 增加附加属性的 api
tabBarExtraContent={<Button>这一条是给每一个都加上, 没有判断</Button>}
// 这条可以做判断
tabBarExtraContent={this.createBarExtraContent()}
>
<TabPane tab="1" key="1">111</TabPane>
<TabPane tab="2" key="2">222</TabPane>
<TabPane tab="3" key="3">333</TabPane>
</Tabs>
</div>)
}
}

Others

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Modal
title={record ? `# ${record.issue.number}` : ''}
// 当多个数据共用一个 modal 时, 为了保证 modal 弹出的是当前的数据, 所以需要做第二步条件判断
visible={this.state.nameVisible && record.issue.id === this.state.nameId}
// 确认、取消时所做的操作
onOk={this.nameHideModal}
onCancel={this.nameHideModal}
// 如果使用确认、取消按钮, 给两个按钮修改名称
okText="确认"
cancelText="取消"
// 当使用一个 Modal 弹框的时候, 下面会默认有取消、确定两个按钮, 所以如果只是要做展示使用, 就不需要下面的按钮
footer={
[] // 设置footer为空,去掉 取消 确定默认按钮
null // 直接去掉footer, 包括下划线
}
>
// modal 内显示的内容
...
</Modal>