antd Tab切换后子组件重复渲染
当切换到历史订单的时候, MyComponent被渲染了两次, 内部的componentDidMount被执行了两次, 原因是TabPane下面的组件创建后被保留在dom树中, 切换的时候会再次创建
render() {
return <Tabs defaultActiveKey="1" onChange={this.tabsOnChange}>
<TabPane tab="待处理订单" key="1">
<MyComponent/>
</TabPane>
<TabPane tab="历史订单" key="2">
<MyComponent/>
</TabPane>
</Tabs>
}
解决方案
在tab的onChange方法中记录选中的key, 用&& 条件渲染组件即可, 这样每次切换后都会删除已存在的dom, 创建新的dom
tabsOnChange = (key) => {
this.state.tabKey = key
}
render() {
return <Tabs defaultActiveKey="1" onChange={this.tabsOnChange}>
<TabPane tab="待处理订单" key="1">
{this.state.tabKey == 1 && <MyComponent/>}
</TabPane>
<TabPane tab="历史订单" key="2">
{this.state.tabKey == 2 && <MyComponent/>}
</TabPane>
</Tabs>
}