Antd Charts 折线图（面积图）踩的坑

问题一：在多tab下包裹折线图，当切换tab后，折线图的高度会缩小，整个图缩成一团；

代码

return (
    <ProCard >
        <Procard.TabPane key="tab1" tab="产品数量">
            <Area [...areaConfig} />
        </ProCard.TabPane>
         <Procard.TabPane key="tab2" tab="资产规模">
            <Area [...areaConfig}/>
        </ProCard.TabPane>
    </Procard>
)

 图示：

切换前：

 切换后：

 问题原因：不求知啊，垃圾antd。

解决思路：每次切换tab的时候，都重新加载折线图；

具体代码

1.设定一个种子作为折线图的key;

2.在tab切换时，给种子一个随机值；

const [seed,setSeed] = useState(1);//设定种子

return (
    <ProCard 
        tab={
            onChange =()=>{
                setSeed(Math.random());
            }
        }>
        <Procard.TabPane key="tab1" tab="产品数量">
            <Area [...areaConfig} key={seed}/>
        </ProCard.TabPane>
         <Procard.TabPane key="tab2" tab="资产规模">
            <Area [...areaConfig} key={seed+1}/>
        </ProCard.TabPane>
    </Procard>
)

---

问题二：完事儿之后我又在下面开发了一个带tab的条形图，结果明明毫无关联，下面的tab切换，上面的折线图就会重新渲染；折线图的tab切换，条形图就没事。

解决思路：用userMamo()控制控件刷新，正好用上之前的seed;

具体代码：

const [seed,setSeed] = useState(1);//设定tab1种子
const [barSeed,setBarSeed] = useState(10);//设定tab2种子

//别忘了在页面加载的时候刷新seed值
useEffect(()=>{
    setSeed(Math.random)
})

return (
    <ProCard 
        tab={
            onChange =()=>{
                setSeed(Math.random());
            }
        }>
        <Procard.TabPane key="tab1" tab="产品数量">
           { useMemo(()=><Area [...areaConfig} key={seed}/>,[seed])}
        </ProCard.TabPane>
         <Procard.TabPane key="tab2" tab="资产规模">
          { useMemo(()=><Area [...areaConfig} key={seed}/>,[seed])}
        </ProCard.TabPane>
    </Procard>
    <ProCard 
        tab={
            onChange =()=>{
                setBarSeed(Math.random());
            }
        }>
        <Procard.TabPane key="tab11" tab="产品数量">
           <Bar[...barConfig} key={barSeed}/>
        </ProCard.TabPane>
         <Procard.TabPane key="tab22" tab="资产规模">
          <Area [...barConfig} key={barSeed+1}/>
        </ProCard.TabPane>
    </Procard>

)