react有tab页，如何实现未选中的tab页隐藏但不销毁

Question

页面有tab页，有两个子页面，现在是这样实现

{
 tab===1? <div id="tab1" /> : <div id="tab2" />
}

这样写法会导致子页面隐藏的时候被销毁，之前里面的data值全部重置。如何实现tab隐藏但不销毁

Answer 1

{
 
    <div id="tab1" style={{ display: tab===1 ? '':'none' }} /> 
    <div id="tab2" style={{ display: tab===1 ? 'none':'' }} />
}

antd.Tabs 底层代码就是这样实现缓存的。
你也可以利用 ReactDOM.createPortal 封装一个KeepAlive组件
参考：
在 React 中实现 keep alive
利用React原生API 实现keepAlive 组件

Answer 2

改style里面的display属性呢？

{
 <div id="tab1" style={{display:tab===1?'block':'none'}} /><div style={{display:tab===1?'none':'block'}} id="tab2" />
}

Answer 3

可以对比 vue 中的 v-if 和 v-show 的区别, 一个是销毁组件, 一个是设置样式的 display: none