2020/10/09 react 函数式组件解决 antd tabs 重复渲染

• 问题效果
  

• 之前的代码
  

• 解决方法
  使用 条件渲染 实现每次切换刷新页面

• onChange事件
  

• 修改后的代码

import React, { useState } from 'react';
--
const [activeKey, setactiveKey] = useState("1")
  let onChange = (key) => {
    setactiveKey(key)
  }
--
<div className="my-ads">
        <Tabs defaultActiveKey="1" centered onChange={onChange} >
          <TabPane tab="时效产品" key="1" forceRender="false">
            {activeKey === "1" ? <TwopicSwiper imgList={shixiaoProducts}></TwopicSwiper> : null}
          </TabPane>
          <TabPane tab="增值服务" key="2" forceRender="false">
            {activeKey === '2' ? <TwopicSwiper imgList={addService}></TwopicSwiper> : null}
          </TabPane>
          <TabPane tab="特色产品" key="3" forceRender="false">
            {activeKey === '3' ? <TwopicSwiper imgList={specialproducts}></TwopicSwiper> : null}
          </TabPane>
        </Tabs>
 </div>

• 参考链接
  https://www.cnblogs.com/yuzai2088/archive/2004/01/13/13717781.html
  具体为什么会造成重复渲染问题可以下面这篇，我理解不行就没用这种方法
  https://zhuanlan.zhihu.com/p/161223963