antd Tab切换后子组件重复渲染

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>
    }