Reactjs HighchartsReact无法在自定义选项卡中正确渲染

我正在使用一个简单的选项卡实现，我正在努力正确地呈现我的图表。每次我更改选项卡时，图表都会在上一次渲染时“卡住”，并且永远不会刷新。 . 谢谢

const chart1={
“标题”：{“正文”：“图表1”}，
xAxis:{type:'datetime'}，
“系列”：[
{“名称”：“一行”，“数据”：randData1}，
{“名称”：“另一行”，“数据”：randData2}
],
图表：{事件：{加载：函数（）{}}
}
常量图表2={
“标题”：{“正文”：“图表2”}，
“系列”：[
{“名称”：“第一行”，“数据”：randData3}，
{“名称”：“第二行”，“数据”：randData4}
],
图表：{事件：{加载：函数（）{}}
}
常量TheChart=（{chartData}）=>
常量tabHeaders=[
“图表一”，
“图表二”
];
常量选项卡内容=[
,
];
const tabsProps={tabHeaders，tabContent}；
ReactDOM.render（，document.getElementById（'root'））；

请看一看这个示例：-React不会切换同一类的组件，第一个组件只会更新。为第二个组件创建新类是解决此问题的方法之一：

这里的另一个问题是Highcharts for performance mutate series配置对象：-因此您需要创建选项的深度副本或更改项目的结构

---

现场演示：

我看了一下。我将使用“新类”方法，因为我的配置对象带有对函数的引用，因此，任何JSON.stringify都将从新副本中删除它们。谢谢！然而，如果我同时实现这两种情况，事情会变得更加混乱。当然，我会在我的项目中避免这种情况。嗨，何塞，所有这些都与我上面描述的问题有关。如果添加

linear

axis类型，则一切似乎都正常：。您可以注意到由

图表引起的动画。通过切换第三个和第四个图表更新
。
const chart1 = {
  "title": { "text": "Chart 1" },
  xAxis: { type:'datetime' },
  "series": [
    { "name": "ONe line", "data": randData1 },
    { "name": "Another LIne", "data": randData2 }
  ],
  chart: { events: { load: function(){} } }
}

const chart2 = {
  "title": { "text": "Chart 2" },
  "series": [
    { "name": "First Line", "data": randData3 },
    { "name": "Second Line", "data": randData4 }
  ],
  chart: { events: { load: function(){} } }
}


const TheChart = ({ chartData }) => <HighchartsReact highcharts = { Highcharts } options = { chartData } />

const tabHeaders = [
  'Chart One', 
  'Chart Two'
];
const tabContent = [
  <TheChart chartData={ chart1 } />,
  <TheChart chartData={ chart2 } />
 ];

const tabsProps = { tabHeaders, tabContent };
ReactDOM.render(<Tabs { ...tabsProps } />, document.getElementById('root'));

const tabContent = [
  <div>...</div>,
  <TheChart chartData={ chart1 } />,
  <TheChart2 chartData={ chart2 } />
];

chart.update({
    series [...],
    xAxis: {
        type: 'datetime'
    }
});

chart.update({
    series [...],
    xAxis: {
        type: 'linear'
    }
});