使用 Highcharts 和 React 创建条形图 - 出现未找到渲染 div 的错误

Question

我正在尝试在我的 Web 应用程序中使用 Highcharts 创建一个条形图，该应用程序在前端使用 React。下面是我的 dashboard.tsx 文件的片段，我基本上只是从 JSFiddle ( http://jsfiddle.net/8qjcz4q0/ )复制并粘贴了代码，该代码使用 Highcharts 呈现简单的条形图，但由于某种原因，它不是工作，我在我的控制台中收到一个错误（Highcharts 错误 #13），渲染 div 没有显示。

 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as Highcharts from "highcharts";

 Highcharts.chart('container', {
   chart: {
    type: 'column'
   },
  title: {
    text: 'World\'s largest cities per 2014'
   },
 subtitle: {
    text: 'Source: Wikipedia'
  },
  xAxis: {
    type: 'category',
    labels: {
        rotation: -45,
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
      }
   },
   yAxis: {
    min: 0,
    title: {
        text: 'Population (millions)'
    }
   },
legend: {
    enabled: false
},
tooltip: {
    pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
    name: 'Population',
    data: [
        ['Shanghai', 23.7],
        ['Lagos', 16.1],
        ['Istanbul', 14.2],
        ['Karachi', 14.0],
        ['Mumbai', 12.5],
        ['Moscow', 12.1],
        ['São Paulo', 11.8],
        ['Beijing', 11.7],
        ['Guangzhou', 11.1],
        ['Delhi', 11.1],
        ['Shenzhen', 10.5],
        ['Seoul', 10.4],
        ['Jakarta', 10.0],
        ['Kinshasa', 9.3],
        ['Tianjin', 9.3],
        ['Tokyo', 9.0],
        ['Cairo', 8.9],
        ['Dhaka', 8.9],
        ['Mexico City', 8.9],
        ['Lima', 8.9]
    ],

 }]
});
render() {
     return ( <div>
        <div id="container"></div>
        </div>
    );
  }
}

我怀疑 HTML id 属性不适用于 React，但我不知道 Highcharts 是否可以呈现为类而不是 id。

Answer 1

在这里回答我自己的问题，在 highcharts 尝试查找 div 后调用渲染函数。您可以将图表渲染代码放在 componentDidMount() 部分，直接使用危险的SetInnerHTML 渲染 highcharts 代码，或者在 highcharts 代码上设置计时器。对于另一个答案，在我的 html 中粘贴 div 标签的问题是我正在 JSX 中呈现其他所有内容，因此想要从我的 JSX 内部呈现我的图表。