描述：
Tabs組件在來回切換的過程中，造成TabPane中包含的相同子組件重復渲染，例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card"> <TabPane tab={"對外授權(quán)"} key="/authed-by-me"> <AuthedCollections collectionType={this.collectionType} /> </TabPane> <TabPane tab={"申請權(quán)限"} key="/authed-to-me"> <AuthedCollections collectionType={this.collectionType} /> </TabPane></Tabs>changeTab = (key: string) => { this.collectionType = key === '/authed-by-me' ? CollectionEnums.AUTHED_TO_GRANT : CollectionEnums.AUTHED_TO_APPLY; this.setState({ tabActiveKey: key })}; |
分析：
在Tabs的onChange監(jiān)聽函數(shù)changeTab中調(diào)用setState，造成頁面重新render。antd 的策略是，只渲染當前的。當用戶切換過后，不刪除之前渲染過的節(jié)點。所以點擊切換會逐漸增多。為的是防止用戶在 mount 階段調(diào)用異步請求導致切換時反復渲染。所以 render 數(shù)量隨著上層刷新而整體刷新并增加是預期行為。
解決方案：
運用react的條件渲染，在每一次tab切換的時候?qū)⑸蟼€頁面移出Dom樹
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card"> <TabPane tab={"對外授權(quán)"} key=""> { this.collectionType === CollectionEnums.AUTHED_TO_GRANT && <AuthedCollections collectionType={this.collectionType} /> } </TabPane> <TabPane tab={"申請權(quán)限"} key="/authed-to-me"> { this.collectionType === CollectionEnums.AUTHED_TO_APPLY && <AuthedCollections collectionType={this.collectionType} /> } </TabPane></Tabs> |
Antd Tabs 當前頁面來回切換 表單數(shù)據(jù)不清空（或者清空）
清空表單的辦法是this.props.form.resetFields();
但是本篇文章主要講解不清空
靈活使用 display:none 就可以避免切換的時候表單數(shù)據(jù)被setState重新渲染清空掉 （即切換tab項，不清空表單）
查詢區(qū)域
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
{/* 查詢區(qū)域 */} <div className="search-form-area"> { <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // 項目角度 ref={(form) => this.ProjSearchForm = form} submitFuc={this.getProjPage} fieldsData={projSearchData} colNum={4} diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }} // moreSearchData={moreSearchData} /></div> } { <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>< SearchFieldForm // 產(chǎn)品角度 ref={(form) => this.PrdSearchForm = form} submitFuc={this.getProjPage} fieldsData={prdSearchData} colNum={4} diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }} /></div> } </div> |
列表區(qū)域
|
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
|
{/* 列表區(qū)域 */} <div style={{ height: tableHeight + 100 }} className='myProjTable'> <Tabs defaultActiveKey="1" onChange={this.handleTabsChange}> <TabPane tab="項目角度" key="1" style={{ backgroundColor: '#fff' }}> <CustomTable rowKey='projId' size="small" style={{ height: tableHeight }} columns={columns} tableData={projTableData} expandedRowRender={this.expandedRowRender} pagination={pagination} handleTableChange={this.handleTableChange} scroll={{ y: tableScrollHeight, x: 1660 }} tableRowSelection={this.tableRowSelection} /> </TabPane> <TabPane tab="產(chǎn)品角度" key="2" style={{ backgroundColor: '#fff' }}> <CustomTable rowKey="projId" size="small" style={{ height: tableHeight }} columns={columnsPrd} tableData={prdTableData} handleTableChange={this.handleTableChange} pagination={pagination} scroll={{ y: tableScrollHeight, x: 1800 }} tableRowSelection={this.tableRowSelection} /> </TabPane> </Tabs> </div> |
到此這篇關(guān)于React antd tabs切換造成子組件重復刷新的文章就介紹到這了,更多相關(guān)antd tabs重復刷新內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/TZ2318387771/article/details/108503639
