HighchartsReact не отображается должным образом в пользовательских вкладках

Question

Я использую HighchartsReact , и я изо всех сил стараюсь правильно отобразить свои диаграммы в простой реализации вкладок.Каждый раз, когда я меняю вкладки, графики «застревают» при предыдущем рендеринге и никогда не обновляются. Вот пример кода .Спасибо!

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'));

Answer 1

Пожалуйста, посмотрите на этот пример: https://codesandbox.io/s/18836vk8oj - React не переключает компоненты из одного и того же класса, первый компонент только обновляется.Создание нового класса для второго компонента является одним из способов решения проблемы: https://codepen.io/anon/pen/xmqvmX?editors=0010

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

Обновление компонента с диаграммой вызывает chart.update(), например, если вы хотите изменить xAxis.type вы должны изменить его в двух конфигурациях:

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

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

Еще одна проблема заключается в том, что Highcharts для объекта конфигурации серии mutate производительности: https://github.com/highcharts/highcharts/issues/9732 - поэтому вам нужно создать глубокую копию ваших опций или изменитьструктура проекта.

Живая демоверсия: https://codepen.io/anon/pen/YdZmMO?editors=0010