gpt4 book ai didi

关于react的Tabs组件中TabPane的bug

转载 作者:我是一只小鸟 更新时间:2023-04-13 22:31:30 24 4
gpt4 key购买 nike

今天解决了我自认为一个很不起眼的Bug.

我的Tabs下面有5个tabPane,并且这几个tabPane共用了一个search组件,今天遇到了一个bug,就是这几个组件使用公共查找组件的时候,前一个组件的值会影响下一个组件的值.

找了半天发现,原来我应该在父组件Tabs中定义一个useState的状态status,当Tabs执行callback的时候,会有一个key,就把这个key存在status里面,然后当status等于每个组件对应的key时再加载相对应的组件.

不然TabPane会多加载,这样数据就乱了.

写一个代码片段 。

                <Tabs onTabClick={callback}>
    <TabPane key='1'>
                
                  
      {status
                
                ==='1' <ComponentA / > :
                
                  null
                
                
                   }
    
                
                </TabPane>
    <TabPane key='2'>
                
                  
      {status
                
                ==='2' <ComponentB / > :
                
                  null
                
                
                   }
    
                
                </TabPane>
</Tabs>    

                
                  

const [status,setStatus]
                
                =useState(''
                
                  );
const callback
                
                =(key)=>
                
                  {
  setStatus(key)
}
                
              

  。

最后此篇关于关于react的Tabs组件中TabPane的bug的文章就讲到这里了,如果你想了解更多关于关于react的Tabs组件中TabPane的bug的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com