描述：
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={"對外授權"} key="/authed-by-me"> <AuthedCollections collectionType={this.collectionType} /> </TabPane> <TabPane tab={"申請權限"} 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監聽函數changeTab中調用setState，造成頁面重新render。antd 的策略是，只渲染當前的。當用戶切換過后，不刪除之前渲染過的節點。所以點擊切換會逐漸增多。為的是防止用戶在 mount 階段調用異步請求導致切換時反復渲染。所以 render 數量隨著上層刷新而整體刷新并增加是預期行為。
解決方案：
運用react的條件渲染，在每一次tab切換的時候將上個頁面移出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={"對外授權"} key=""> { this.collectionType === CollectionEnums.AUTHED_TO_GRANT && <AuthedCollections collectionType={this.collectionType} /> } </TabPane> <TabPane tab={"申請權限"} key="/authed-to-me"> { this.collectionType === CollectionEnums.AUTHED_TO_APPLY && <AuthedCollections collectionType={this.collectionType} /> } </TabPane></Tabs> |
Antd Tabs 當前頁面來回切換 表單數據不清空（或者清空）
清空表單的辦法是this.props.form.resetFields();
但是本篇文章主要講解不清空
靈活使用 display:none 就可以避免切換的時候表單數據被setState重新渲染清空掉 （即切換tab項，不清空表單）
查詢區域
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
{/* 查詢區域 */} <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 // 產品角度 ref={(form) => this.PrdSearchForm = form} submitFuc={this.getProjPage} fieldsData={prdSearchData} colNum={4} diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }} /></div> } </div> |
列表區域
|
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
|
{/* 列表區域 */} <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="產品角度" 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> |
到此這篇關于React antd tabs切換造成子組件重復刷新的文章就介紹到這了,更多相關antd tabs重復刷新內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/TZ2318387771/article/details/108503639
