如何强制ChakraUI Tabs组件的标签页切换时卸载对应内容?
Tabs
lazyBehavior="unmount" 配置不生效解决方案 - 确认依赖版本:
lazyBehavior是 antd 5.10.0 版本新增的 Tabs 属性,低于该版本的配置不会生效,可执行npm list antd查看当前安装的版本 - 检查冲突属性:如果同时给 Tabs 配置了
destroyInactiveTabPane,该属性优先级高于lazyBehavior,需确保未设置destroyInactiveTabPane={false}覆盖卸载逻辑 - 排查自定义缓存逻辑:若 TabPane 内的内容外层包裹了 React 内置的
<KeepAlive>或第三方缓存组件,会阻断组件的卸载流程,需移除对应缓存配置 - 校验受控逻辑:如果使用受控模式的 Tabs,需确认绑定的
activeKey变量在切换标签时能够正常更新,状态未更新会导致标签页视觉切换但实际内容未重载
你可以在对应标签页的子组件内添加如下代码验证卸载逻辑是否触发:
import { useEffect } from 'react'; // 标签页对应子组件内添加 useEffect(() => { // 组件挂载时触发 return () => { // 组件卸载时触发,可在此处打印日志验证 }; }, []);
内容的提问来源于stack exchange,提问作者guy
相关产品推荐
相关产品推荐

