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

最新推荐文章于 2023-11-22 22:35:16 发布

--风起云涌--

最新推荐文章于 2023-11-22 22:35:16 发布

阅读量3.6k

点赞数 1

分类专栏：前端开发文章标签： javascript 前端 react

本文链接：https://blog.youkuaiyun.com/NLYNN/article/details/121489851

版权

前端开发专栏收录该内容

12 篇文章

订阅专栏

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