Antd Tabs标签页动态加载子组件，会多次渲染的问题

最新推荐文章于 2024-03-28 16:12:40 发布

Solin121

最新推荐文章于 2024-03-28 16:12:40 发布

阅读量5.3k

点赞数 1

本文链接：https://blog.youkuaiyun.com/u013790941/article/details/110925973

版权

在使用Antd的Tabs组件时，遇到动态加载子组件导致每次切换标签页都会触发子组件多次渲染的问题。内容描述了如何解决这个问题，以防止不必要的接口请求和性能消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始我是这样做的

<Tabs
   hideAdd
    onChange={this.onChange}
    activeKey={activeKey}
    type="editable-card"
    onEdit={this.onEdit}
    style={{width: "100%"}}
>
    {TabsTitles.map(pane => (
        <TabPane tab={pane.title} key={pane.key}>
            <Wrapper>
                <Contents/>
            </Wrapper>
        </TabPane>
    ))}
</Tabs>

这样写完后，会导致每次切换标签页，子组件Contents都会加载之前点过的标签页次数，因为我子组件的数据都是不一样的会请求接口，所以切换的时候会请求小于等于当前标签页数量的接口，很多重复请求。

<Tabs
   hideAdd
    onChange={this.onChange}
    activeKey={activeKey}
    type="editable-card"
    onEdit={this.onEdit}
    style={{width: "100%"}}
>
    {TabsTitles.map(pane => (
        <TabPane tab={pane.title} key={pane.key}>
            <Wrapper>
                {activeKey === pane.key && <Contents/>}
            </Wrapper>
        </TabPane>
    ))}
</Tabs>