Table
控制是否展開(kāi)，expandedRowKeys數(shù)組存放對(duì)應(yīng)展開(kāi)行的數(shù)據(jù)key
expandedRowKeys = {this.state.expandedRowKeys}
控制是否單獨(dú)單元格放置展開(kāi)圖標(biāo)
expandIconAsCell = {false}
number設(shè)置展開(kāi)圖標(biāo)所在的單元格索引梧疲，取一個(gè)不存在的索引可達(dá)到去掉預(yù)設(shè)圖標(biāo)的效果
expandIconColumnIndex = {-1}
展開(kāi)行內(nèi)為Form表單伪朽，雙向綁定導(dǎo)致input焦點(diǎn)丟失
具體原因尚未清楚帮毁，表現(xiàn)疑似展開(kāi)行內(nèi)input雙向綁定觸發(fā)了父組件Table的重新渲染，進(jìn)而觸發(fā)展開(kāi)行內(nèi)重新渲染吉拳，導(dǎo)致焦點(diǎn)丟失质帅，無(wú)法持續(xù)輸入。
應(yīng)急方案：父組件使用生命周期控制渲染
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(nextState) == JSON.stringify(this.state)){
return false;
}
return true;
}
缺點(diǎn)：部分props和state的復(fù)雜數(shù)據(jù)類(lèi)型的變化無(wú)法被shouldComponentUpdate捕獲留攒，無(wú)法正確觸發(fā)視圖變化煤惩，因而必須保證清晰掌握父組件以及子組件所有更新可能。比如父組件中存在下面的上傳組件炼邀，三元運(yùn)算符結(jié)果顯示失效
<Upload ……>
{
this.state.fileList[record.key] !== undefined ?
<Button>
<Icon type="upload"/>{this.state.fileList[record.key].name
</Button>
:
<Button>
<Icon type="upload"/>上傳
</Button>
}
</Upload>
在該上傳組件中魄揉，通過(guò)beforeUpload函數(shù)更新state的fileList（Object）并沒(méi)有觸發(fā)視圖變化。通過(guò)在shouldComponentUpdate中輸出控制臺(tái)發(fā)現(xiàn)拭宁，nextState和this.state的fileList一致為更新后的值洛退，原因未知瓣俯。為了解決這個(gè)問(wèn)題，我在state中引入了一個(gè)Boolean值兵怯，用于通過(guò)beforeUpload改變它來(lái)觸發(fā)shouldComponentUpdate彩匕。
inputNumber
輸入非數(shù)字時(shí)，在失去焦點(diǎn)后onChange獲得的value會(huì)變成undefined摇零，而不是空字符串或者0
Modal
個(gè)人常用例子
<Modal
visible={this.state.visible}
maskClosable = {false}
onCancel={this.modalClose}
title="提交確認(rèn)"
footer={[
<Button key="submit" type="primary" size="large" onClick={this.submit} loading={this.state.confirmLoading}>
確定
</Button>,
<Button key="back" size="large" onClick={this.modalClose}>取消</Button>
]}
>
<p>{this.state.modalContent}</p>
</Modal>
多個(gè)modal 顯示時(shí)可能存在覆蓋順序錯(cuò)誤
通過(guò)設(shè)置modal的zIndex值推掸，將需要的modal層次提高
Form
個(gè)人常用例子
checkError = (id) => {
// Only show error after a field is touched.
return this.props.form.isFieldTouched(id) && this.props.form.getFieldError(id)
}
...
<FormItem
validateStatus={this.checkError('title') ? 'error' : ''}
help={this.checkError('title') || ''}
label={(
<span>
論文題目
</span>
)}
>
{getFieldDecorator('title', {
rules: [{ required: true, message: '標(biāo)題不能為空!', whitespace: true }],
})(
<Input placeholder="Title" />
)}
</FormItem>
