TypeError：无法读取 null 的属性“nodeName”

Question

我正在尝试运行一个小图表来测试在 Visual Studio 中创建的项目中的 Highchart 并且遇到了一个

TypeError：无法读取 null a.Chart.getArgs 的属性“nodeName” L:/Google Drive/公开大学工作/三年级 模块/TM4/analitics/ReactApp/ReactApp/ClientApp/node_modules/highcharts/highcharts.js:266 错误信息。

该项目在 React 中，具有以下依赖项

"bootstrap": "^3.3.7",
"highcharts": "^7.1.1",
"highcharts-react-official": "^2.1.3",
"react": "16.4.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"rimraf": "^2.6.2"

到目前为止，我已经尝试创建一个新的 react 项目，并在安装我省略了 bootstrap 和 react 路由器的依赖项后将此组件复制到其中。这按预期显示了图表，因此，我现在知道该组件按预期工作。

然后我尝试重新安装 Highchart 并在原始项目中对 Highchart 做出反应，但没有成功。

我查看了有关堆栈溢出的其他一些帖子，发现了类似的错误，但是在这些问题中找不到解决方案。

import React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { renderToString } from 'react-dom/server';



export default class Hichart extends Component {

    render(){
        return (<div>
            <HighchartsReact highcharts={Highcharts} options={{
                title: {
                    text: 'My chart'
                },
                series: [{
                    data: [1, 2, 3]
                }]
            }} /></div > );
    }
}

我希望呈现一个图表，而不是我收到一条很长的错误消息，突出显示 highchart.js 文件的部分。

× TypeError: Cannot read property 'nodeName' of null a.Chart.getArgs L:/Google Drive/公开大学工作/三年级 modules/TM4/analitics/ReactApp/ReactApp/ClientApp/node_modules/highcharts/highcharts.js:266

Answer 1

试试这个重构。

“从'react-dom'导入{渲染};”当你在一个 html 元素上渲染整个 React 应用程序时使用。

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { renderToString } from 'react-dom/server';


class HichartComponent extends React.Component {
  
  render(){
    const options = {
      title: {
        text: 'My chart'
      },
      series: [{
        data: [1, 2, 3]
      }]
    }
    
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
        />
      </div>
    );
  }
}

export default HichartComponent;