react-vis在react-tabs中仅首次渲染，后续无法显示问题咨询

这个问题我之前也碰到过，本质是react-tabs的默认渲染行为和react-vis的尺寸依赖逻辑之间的冲突，我来给你拆解原因和解决办法：

问题根源 #

react-tabs默认会对非活跃的标签页执行卸载操作（也就是移除对应的DOM元素），当你再次切换回图表标签页时，组件会重新挂载，但react-vis的FlexibleXYPlot是依赖容器的实际尺寸来计算图表布局的。此时容器可能还处于未完全显示的状态，导致尺寸计算异常（比如宽高为0），最终图表无法渲染。

解决方案（按推荐程度排序） #

1. 强制react-tabs保留所有标签页的DOM

这是最简单直接的方法，给对应的TabPanel组件添加forceRenderTabPanel={true}属性，这样react-tabs就不会卸载非活跃标签页的内容，图表会一直保留在DOM中，切换时自然能正常显示：

// 给你的图表所在TabPanel添加forceRenderTabPanel属性
<TabPanel forceRenderTabPanel={true}>
  <div style={{ width: "95%", height: "60vh", marginLeft: "25px" }}>
    <FlexibleXYPlot>
      <HorizontalGridLines/>
      <LineSeries data={preparedData}/>
      <XAxis title="1" position="middle"/>
      <YAxis title="2" position="middle"/>
    </FlexibleXYPlot>
  </div>
</TabPanel>

2. 通过key强制图表组件重新挂载

如果不想保留所有标签页的DOM（担心性能问题），可以给图表的容器元素绑定一个和当前活跃标签索引关联的key。当切换到该标签页时，key值变化会触发组件重新挂载，此时容器已经完全显示，FlexibleXYPlot能正确计算尺寸：

import { useState } from 'react';
import { Tabs, TabPanel } from 'react-tabs';

// 在父组件中管理活跃标签状态
const [activeTab, setActiveTab] = useState(0);
const CHART_TAB_INDEX = 1; // 假设你的图表在第2个标签页（索引从0开始）

const handleTabChange = (index) => {
  setActiveTab(index);
};

return (
  <Tabs selectedIndex={activeTab} onChange={handleTabChange}>
    {/* 其他标签页 */}
    <TabPanel>
      {/* 给容器添加key，仅当切换到图表标签时更新key */}
      <div 
        key={activeTab === CHART_TAB_INDEX ? Date.now() : 'inactive'}
        style={{ width: "95%", height: "60vh", marginLeft: "25px" }}
      >
        <FlexibleXYPlot>
          <HorizontalGridLines/>
          <LineSeries data={preparedData}/>
          <XAxis title="1" position="middle"/>
          <YAxis title="2" position="middle"/>
        </FlexibleXYPlot>
      </div>
    </TabPanel>
  </Tabs>
);

3. 手动触发图表重绘

如果上面两种方法都不适用，你可以监听标签切换事件，在切换到图表标签时手动触发react-vis的重绘。通过ref获取XYPlot实例，调用它的redraw()方法：

import { useRef, useState } from 'react';
import { Tabs, TabPanel } from 'react-tabs';
import { FlexibleXYPlot } from 'react-vis';

const ChartTab = () => {
  const plotRef = useRef(null);
  const [activeTab, setActiveTab] = useState(0);
  const CHART_TAB_INDEX = 1;

  const handleTabChange = (index) => {
    setActiveTab(index);
    // 切换到图表标签时，延迟触发重绘确保容器已显示
    if (index === CHART_TAB_INDEX) {
      setTimeout(() => {
        plotRef.current?.redraw();
      }, 100);
    }
  };

  return (
    <Tabs selectedIndex={activeTab} onChange={handleTabChange}>
      <TabPanel>
        <div style={{ width: "95%", height: "60vh", marginLeft: "25px" }}>
          <FlexibleXYPlot ref={plotRef}>
            <HorizontalGridLines/>
            <LineSeries data={preparedData}/>
            <XAxis title="1" position="middle"/>
            <YAxis title="2" position="middle"/>
          </FlexibleXYPlot>
        </div>
      </TabPanel>
    </Tabs>
  );
};

内容的提问来源于stack exchange，提问作者deathfry