Highcharts错误＃13，带有打字稿的反应应用

Question

我有一个与this主题有关的问题。我是TS和React的新手，并根据this指南创建了一个应用。但是，当我尝试在App.tsx中添加高图时，如下所示：

import * as React from 'react';
import './App.css';
import * as Highcharts from "highcharts";

let myChart = Highcharts.chart("App",{
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

class App extends React.Component {
  render() {
    return (
      <div id="App">
          {myChart}
      </div>
    );
  }
}

export default App;

发生的是，当运行npm run start时，出现以下错误。我想念什么？

Error: Highcharts error #13: www.highcharts.com/errors/13
▶ 9 stack frames were collapsed.
./src/App.tsx
D:/Programming/Bitbucket/report-example/src/App.tsx:5
  2 | import './App.css';
  3 | import * as Highcharts from "highcharts";
  4 | 
> 5 | let myChart = Highcharts.chart("main",{
  6 |     chart: {
  7 |         type: 'bar'
  8 |     },
View compiled
▶ 2 stack frames were collapsed.
./src/index.tsx
D:/Programming/Bitbucket/report-example/src/index.tsx:1
> 1 | import * as React from 'react';
  2 | import * as ReactDOM from 'react-dom';
  3 | import App from './App';
  4 | import './index.css';
View compiled
▶ 6 stack frames were collapsed.

编辑：

我想出了一种使它工作的方法。但是关于此解决方案，我仍然有两个问题：

1）为什么它可以与componentDidMount一起使用？

2）我可以通过let以某种方式在App类之外定义图表吗？

import * as React from 'react';
import './App.css';
import * as Highcharts from "highcharts";

class App extends React.Component{
    componentDidMount(){
        Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    }
    render() {
        return (
            <div>
                <div id="container">loading </div>
            </div>
        )
    }
}

export default App;