使用ant design 的Tabs組件過程中色鸳，遇到切換需要重新獲取數(shù)據(jù)的場景。
image.png
但是tabs組件本身切換時胀蛮，是不銷毀子組件內(nèi)容的冷溶，不會重新加載渐白，解決方案是：
import { Tabs, Button } from 'antd';
import ElectricalSafety from './electricalSafety'; // 用電安全
import EnergyMonitor from './energyMonitor'; // 能耗監(jiān)測
const { TabPane } = Tabs;
const SmartHydropower = (props) => {
const [curTabKey,setCurTabKey] = useState('1')
// 點擊“設(shè)備管理”fn
const jumpManage = ()=>{
router.replace('/deviceManage');
}
// 切換tab的回調(diào)
const changeTabs = (activeKey)=>{
setCurTabKey(activeKey)
}
const operations = <Button type="primary" onClick={jumpManage}>設(shè)備管理</Button>;
return (
<div className={styles.container}>
<Tabs tabBarExtraContent={operations} onChange={changeTabs} >
<TabPane tab="用電安全" key="1">
{curTabKey ==='1' ? <ElectricalSafety /> : <div></div> }
</TabPane>
<TabPane tab="能耗監(jiān)測" key="2">
{curTabKey ==='2' ? <EnergyMonitor /> : <div></div> }
</TabPane>
</Tabs>
</div>
)
};
export default SmartHydropower;
