reactjs - 使用 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()部分，直接使用dangerouslySetInnerHTML渲染highcharts代码，或者在highcharts代码上设置一个定时器。对于另一个答案，在我的 html 中粘贴 div 标签的问题是我正在渲染 JSX 中的所有其他内容，因此想从我的 JSX 中渲染我的图表。