React 15.4.2与SPFx 1.1环境适配的HighchartsReact版本咨询

问题根源 #

你碰到的所有报错，本质都是HighchartsReact新版本依赖React 16+的特性（比如createRef、新JSX类型定义），再加上SPFx 1.1对TypeScript版本的限制，所以必须找完全兼容React 15的版本，还要调整代码写法。

具体解决步骤 #

1. 安装兼容版本 #

直接安装HighchartsReact 1.0.0（这是唯一适配React 15.x且无TypeScript兼容问题的正式版），搭配Highcharts 7.2.2（过高版本会依赖React 16+特性）：

npm install highcharts@7.2.2 highcharts-react-official@1.0.0 --save

2. 修正导入方式（解决1.x版本的"Element type is invalid"错误） #

1.x版本采用默认导出而非命名导出，之前的导入写法错误，调整为：

// 错误写法（会导致Element类型错误）
// import { HighchartsReact } from 'highcharts-react-official';

// 正确写法
import HighchartsReact from 'highcharts-react-official';

3. 规避React 16+的Ref特性 #

React 15.4.2不支持createRef，所以不要用ref获取图表实例，改用callback方式：

import * as React from 'react';
import HighchartsReact from 'highcharts-react-official';
import * as Highcharts from 'highcharts';

export default class MyChart extends React.Component<any, any> {
  private chartInstance: Highcharts.Chart | null = null;

  onChartCreated = (chart: Highcharts.Chart) => {
    this.chartInstance = chart;
  };

  render() {
    const chartOptions: Highcharts.Options = {
      title: { text: '测试图表' },
      series: [{ data: [1, 3, 5, 2, 4] }]
    };

    return (
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        callback={this.onChartCreated} // 替代ref获取实例
      />
    );
  }
}

4. 调整TypeScript配置（解决JSX组件类型错误） #

SPFx 1.1默认使用低版本TypeScript（2.x），在项目根目录的tsconfig.json中添加以下配置，放宽类型检查：

{
  "compilerOptions": {
    "jsx": "react",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  }
}

验证调试 #

1. 执行gulp clean和gulp build确保无编译错误
2. 启动本地工作台gulp serve，检查图表是否正常渲染
3. 若仍有控制台错误，确认Highcharts版本为7.x系列，避免使用8.x及以上版本

内容的提问来源于stack exchange，提问作者Dylan Cristy