React 基础（二）

Ant Design of React

常用的一些组件

Table,Modal,Pagination,Input,Button,Radio,Select,message

Table

参数	说明	类型	默认值
bordered	是否展示外边框和列边框	boolean	false
columns	表格列的配置描述，具体项见下表	ColumnProps[]	-
components	覆盖默认的 table 元素	object	-
dataSource	数据数组	any[]
defaultExpandAllRows	初始时，是否展开所有行	boolean	false
defaultExpandedRowKeys	默认展开的行	string[]	-
expandedRowKeys	展开的行，控制属性	string[]	-
expandedRowRender	额外的展开行	Function(record):ReactNode	-
expandRowByClick	通过点击行来展开子行	boolean	false
footer	表格尾部	Function(currentPageData)
indentSize	展示树形数据时，每层缩进的宽度，以 px 为单位	number	15
loading	页面是否加载中	boolean|object (更多)	false
locale	默认文案设置，目前包括排序、过滤、空数据文案	object	filterConfirm: '确定' filterReset: '重置' emptyText: '暂无数据' 默认值
pagination	分页器，参考配置项或 pagination，设为 false 时不展示和进行分页	object
rowClassName	表格行的类名	Function(record, index):string	-
rowKey	表格行 key 的取值，可以是字符串或一个函数	string|Function(record):string	'key'
rowSelection	列表项是否可选择，配置项	object	null
scroll	设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 x 设置一个数字，如果要设置为 true，需要配合样式 .ant-table td { white-space: nowrap; }	{ x: number | true, y: number }	-
showHeader	是否显示表头	boolean	true
size	正常或迷你类型，default or small	string	default
title	表格标题	Function(currentPageData)
onChange	分页、排序、筛选变化时触发	Function(pagination, filters, sorter)
onExpand	点击展开图标时触发	Function(expanded, record)
onExpandedRowsChange	展开的行变化时触发	Function(expandedRows)
onHeaderRow	设置头部行属性	Function(column, index)	-
onRow	设置行属性	Function(record, index)	-

Pagination

<Pagination onChange={onChange} total={50} />

参数	说明	类型	默认值
current	当前页数	number	-
defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode	-
pageSize	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[]	'10', '20', '30', '40'
showQuickJumper	是否可以快速跳转至某页	boolean	false
showSizeChanger	是否可以改变 pageSize	boolean	false
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)	-
simple	当添加该属性时，显示为简单分页	boolean	-
size	当为「small」时，是小尺寸分页	string	""
total	数据总数	number	0
onChange	页码改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)	noop
onShowSizeChange	pageSize 变化的回调	Function(current, size)	noop

Menu

参数	说明	类型	默认值
defaultOpenKeys	初始展开的 SubMenu 菜单项 key 数组
defaultSelectedKeys	初始选中的菜单项 key 数组	string[]
forceSubMenuRender	在子菜单展示之前就渲染进 DOM	boolean	false
inlineCollapsed	inline 时菜单是否收起状态	boolean	-
inlineIndent	inline 模式的菜单缩进宽度	number	24
mode	菜单类型，现在支持垂直、水平、和内嵌模式三种	string: vertical vertical-right horizontal inline	vertical
multiple	是否允许多选	boolean	false
openKeys	当前展开的 SubMenu 菜单项 key 数组	string[]
selectable	是否允许选中	boolean	true
selectedKeys	当前选中的菜单项 key 数组	string[]
style	根节点样式	object
subMenuCloseDelay	用户鼠标离开子菜单后关闭延时，单位：秒	number	0.1
subMenuOpenDelay	用户鼠标进入子菜单后开启延时，单位：秒	number	0
theme	主题颜色	string: light dark	light
onClick	点击 MenuItem 调用此函数	function({ item, key, keyPath })	-
onDeselect	取消选中时调用，仅在 multiple 生效	function({ item, key, selectedKeys })	-
onOpenChange	SubMenu 展开/关闭的回调	function(openKeys: string[])	noop
onSelect	被选中时调用	function({ item, key, selectedKeys })	无

Input

参数	说明	类型	默认值
addonAfter	带标签的 input，设置后置标签	string|ReactNode
addonBefore	带标签的 input，设置前置标签	string|ReactNode
defaultValue	输入框默认内容	string
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string
prefix	带有前缀图标的 input	string|ReactNode
size	控件大小。注：标准表单内的输入框大小限制为 large。可选 large default small	string	default
suffix	带有后缀图标的 input	string|ReactNode
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。	string	text
value	输入框内容	string
onPressEnter	按下回车的回调	function(e)

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置

Button按钮

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled

按钮的属性说明如下：

属性	说明	类型	默认值
ghost	幽灵属性，使按钮背景透明，版本 2.7 中增加	boolean	false
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
icon	设置按钮的图标类型	string	-
loading	设置按钮载入状态	boolean | { delay: number }	false
shape	设置按钮形状，可选值为 circle 或者不设	string	-
size	设置按钮大小，可选值为 small large 或者不设	string	default
target	相当于 a 链接的 target 属性，href 存在时生效	string	-
type	设置按钮类型，可选值为 primary dashed danger(版本 2.7 中增加) 或者不设	string	-
onClick	click 事件的 handler	function	-

<Button>Hello world!</Button> 最终会被渲染为 <button><span>Hello world!</span></button>，并且除了上表中的属性，其它属性都会直接传到 <button></button>。

<Button href="http://example.com">Hello world!</Button> 则会渲染为 <a href="http://example.com"><span>Hello world!</span></a>。

实际项目中：

<Button onClick={this.addTableData} style={{float:'left',marginLeft:'20px',background: '#29d',borderColor:'#29d'}} type="primary">xx属性</Button>