antd Tabs切换时销毁tab，每次切换都重新加载

最新推荐文章于 2023-12-12 16:59:44 发布
最新推荐文章于 2023-12-12 16:59:44 发布
阅读量2.6k 收藏 5
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43915401/article/details/130953169
版权
文章讨论了在业务场景中，每次切换Tab时需发送不同请求的问题。解决方案是利用Tabs组件的`destroyInactiveTabPane`属性，该属性可在切换Tab时销毁不再活动的TabPane，从而实现按需加载并发送相应请求。此特性在官方中文文档未提及，需参考英文GitHub文档。

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

需求：业务逻辑要求每次切换tab的时候，发送请求。但是每个tab需要发送的请求都不一样，想了半天，只想到了切换tab的时候，重新加载tab内容吧。。
解决方法：destroyInactiveTabPane属性：whether destroy inactive TabPane when change tab，切换tab时，销毁tabPane

<Tabs destroyInactiveTabPane>

这个属性，官方文档里没有，需要切换到英文，进入gitHub文档里才有
在这里插入图片描述
在这里插入图片描述
github地址

react+ts+antd-mobile 动态tabs和下拉加载及详情
02-03
在React技术栈中，开发移动端应用时，我们经常会遇到动态Tabs、下拉加载以及详情页面的设计。本项目结合了TypeScript（简称TS）的强类型优势和Ant Design Mobile的组件库，来实现这样的功能。接下来，我们将深入探讨...
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
// 首次加载时，请求第一个Tab的数据 this.tab(0); } }); ``` 在这个例子中，`tab`方法用于处理Tab的切换，它会清除当前的定时器，更新`currentIndex`，然后为新Tab设置定时器。`mounted`生命周期钩子用于在组件...
Ant design pro常用(9):Tabs的使用
好气嗷，但仍要保持微笑!
11-10 3797
import {Tabs} from 'antd'; class OperateComponent extends Component{ render(){ //设置destroyInactiveTabPane，不然会渲染多次（小于TabPane的长度） <div className="company_model"> <div className="card-container"> <Tabs type="card" .
【JavaScript源代码】React antd tabs切换造成子组件重复刷新.docx
12-29
React antd tabs切换造成子组件重复刷新 　　描述：　　Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：　　 this.changeTab(key)}　　 type="card"　　>　　  　　    <AuthedCollections　　        collectionType={this.collectionType}　　     
Antd Tabs更改选项卡时销毁 TabPane
dk123sw的博客
07-23 4698
利用此属性即可摧毁隐藏的TabPane <Tabs destroyInactiveTabPane> 一些题外话 这个属性还挺有用，为什么antd不将此属性加到API里呢？我觉得是出于性能方面的考虑，每次切换我们都要重新创建/销毁DOM，这样做非常消耗性能。而我们创建页面一般目的是重新加载数据，利用onChange 我们即可对数据进行重新加载而不用来回创建DOM，因此antd才没有加此属性。 tabs中英有一点小差异,英文会提示其使用...
每一个tab切换的都是一个新的组件刷新
狼魂之力
08-16 1023
<template> <el-tabs v-model="activeName" style="padding-left: 5px;" @tab-click="handleClick"> <el-tab-pane label="针卡列表" name="first"> <unlock v-if="isUnlock"/> </el-tab-pane> <el-tab-pane label="废止针卡列表"
react中使用antd的tabs进行标签切换时，销毁dom
12-12 1682
最近接的一个需求，需要将之前通过点击按钮触发跳转到的另外一个页面，通过跟点击按钮的页面融合，通过tab的形式进行切换。【由于业务方面的需求，两个页面的逻辑代码部分存在一致性（经多年长期沿用下来的代码）】
解决vue antd tab切换多次切换不刷新的问题
weixin_43994675的博客
06-14 2500
解决vue antd tab切换多次切换不刷新的问题
react实现antd线上主题动态切换功能
10-16
传统的CSS切换方法涉及到页面的重新加载，这对用户体验来说是不可接受的。同时，如果单纯引入所有的LESS文件，虽然可以实现主题切换，但会增加不必要的CSS文件加载，从而降低页面性能。 使用antd-theme-generator：...
react-antd-multi-tabs-admin:ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
05-06
Antd Multi Tabs Admin :hammer_and_wrench:Antd多标签页后台管理模板:hammer_and_wrench: 由于业务上有多页签需求，网上找了一圈，都是基于antd pro的模板，太重了，不喜欢:unamused_face:。 于是自己从以前的框架...
antd tabs切换造成子组件重复刷新
TZ2318387771的博客
09-09 4443
描述： Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如： <Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card" > <TabPane tab={"对外授权"} key="/authed-by-me"> <AuthedCollections co
antd Tab切换后子组件重复渲染
风起云涌的博客
11-23 3733
antd Tab切换后子组件重复渲染 当切换到历史订单的时候, MyComponent被渲染了两次, 内部的componentDidMount被执行了两次, 原因是TabPane下面的组件创建后被保留在dom树中, 切换的时候会再次创建 render() { return <Tabs defaultActiveKey="1" onChange={this.tabsOnChange}> <TabPane tab="待处理订单" key="1"&g
react，antd的Tabs，切换闪动问题，动画效果从前一个tag到新点击tag反复滑动
nuanzhu的博客
03-26 6212
公司项目，用的antd+umi，所以UI库直接用的antd的。 其中，有一个页面的Tabs出现以上问题，排查过组件使用、修改过动画效果，都无用。 最后发现和tab本身没关系，不是各种引入冲突。 是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致...
【antd之tabs踩坑篇】Tabs有items时切换不起作用
小蓝人的博客
08-03 1727
{${官网上如果tabs有很多item的话，能正常切换，但是我在本地要复现这个功能时，创建数组形式的items时，死活都切不过去。
antd tab切换刷新tab内组件的方法
sunzhen15896的博客
12-31 7209
复制代码 onChange =（key）=> { 　　this.setState({ 　　　　activeKey:key 　　}) } ... <Tabs onChange={this.onChange}> <TabPane key='1'> 　　　　{ aciveKey == '1' ? <Query/> : null } 　　 </TabPane> 　　 <TabPane key='2'> 　　　　{ aciveKey ==
antd实现按需加载
WSWTPSWLT的博客
12-04 1309
在使用React开发项目，使用第三方UI库antd时，引入antd文件，每次加载时，把一些不需要的也加载上了，这是没有必要的，所以就需要配置一下antd文件，是她能够按照需要引入对应的文件，写次文章，作为记录，方便日后自己再次使用方便。 第一步：自定义配置 指令：npm i creat-app-rewired customize-cra 第二步：配置json文件 /* package.json...
antd的tabs组件切换动画异常
ky1in93的博客
05-12 1876
目前使用antd 版本4.20.4版本时，tabs切换的动画(设置animated属性)有异常 从tab3切换到tab1时，content会从最左侧开始滑动。 原因是4.20.0版本时的修改，具体changelog可见： Release 4.20.0 · ant-design/ant-design · GitHub 其中有一条： link:fix: remove Tabs overflow hidden style by afc163 · Pull Request ..
antd按需加载
fighting_sunnyGirl的博客
08-04 233
antd按需加载 安装依赖 "antd": "^4.16.7"， "babel-plugin-import": "^1.13.3", 配置babel.config.jsmodule.exports = { plugins: [ [ 'import', { libraryName: 'antd', style: true, }, ], ], }
每次切换页面 纵坐标滚动条就会到最顶部
weixin_57711933的博客
04-06 299
每次切换页面 纵坐标滚动条就会到最顶部。
antd vue一个表单分布在两个不同的Tab页面中，并且希望在切换Tab时表单的值能够正确回显
最新发布
12-11
在antd vue中，如果一个表单分布在两个不同的Tab页面中，并且希望在切换Tab时表单的值能够正确回显，可以通过以下步骤实现： 1. **创建一个统一的表单数据对象**：将表单的所有字段数据存储在一个统一的对象中。 2. **使用v-model绑定表单数据**：在每个Tab页的表单组件中使用v-model将表单字段绑定到统一的对象。 3. **确保表单组件的key唯一**：每个表单组件的key需要唯一，以确保表单组件在切换Tab时能够正确销毁和重建。 以下是一个具体的示例代码： ```html <template> <a-form :form="form" @submit="handleSubmit"> <a-tabs v-model="activeTab"> <a-tab-pane key="1" tab="Tab 1"> <a-form-item label="Field 1"> <a-input v-model="formData.field1" /> </a-form-item> </a-tab-pane> <a-tab-pane key="2" tab="Tab 2"> <a-form-item label="Field 2"> <a-input v-model="formData.field2" /> </a-form-item> </a-tab-pane> </a-tabs> <a-button type="submit">Submit</a-button> </a-form> </template> <script> export default { data() { return { activeTab: '1', formData: { field1: '', field2: '' } }; }, methods: { handleSubmit(e) { e.preventDefault(); console.log(this.formData); } } }; </script> ``` 在这个示例中： 1. **创建统一的表单数据对象**：`formData`对象包含所有表单字段的数据。 2. **使用v-model绑定表单数据**：在每个`a-form-item`中使用`v-model`将表单字段绑定到`formData`对象。 3. **确保表单组件的key唯一**：每个`a-tab-pane`的`key`属性确保在切换Tab时表单组件能够正确销毁和重建。 这样，当用户在不同的Tab页面中输入表单数据并切换Tab时，表单的数据会正确回显，并且在提交时可以通过`formData`对象获取所有表单数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值