与React 15.4.2一起使用的HighchartsReact的正确版本是什么？

k10s72fa 于 2022-12-13 发布在 Highcharts

关注(0)|答案(1)|浏览(127)

我正在尝试在SP 2016的SharePoint框架（SPFx）Web部件中使用HighchartsReact。
因为我被困在SP 2016中，我被困在使用以下版本的东西：

SPFx 1.1
节点8.17.0
React15.4.2

我绝对不能去更高版本的节点或React。
哪个版本的HighchartsReact可以使用这个配置？我试过很多版本，它们都抛出错误。
所有主要版本1（1.1.0、1.2.0、1.3.0、1.4.0、1.5.2）都在React中抛出此错误：
元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。请检查MyChart的呈现方法
早期的主要版本2（我特别尝试了2.0.0和2.1.3）在浏览器控制台中抛出了以下错误：
未捕获（在承诺中）TypeError：在新测试中，createRef不是函数（HighchartsReact.js：6：28）
在2.1.0、2.1.3和2.2.2版本中，我在VS代码中得到了一个Typescript错误，其中我的<HighchartsReact />组件带有红色下划线，错误显然是：
“HighchartsReact”不能用作JSX组件。

但是 * 2.1.0和2.1.3仍会建置，但2.2.2不会。

版本3.0.0和3.1.0在控制台中抛出此错误：
未捕获（在承诺中）错误：**“error”的值不能是未定义的
而且还会在SPFx工作台UI中显示不同的错误：
原始错误：加载https://component-id.invalid/d0f2d321-9397-4488-9d9c-346e28ab3e54_0.0.1时出错对象（...）不是函数
因此，每个 * 版本的HighchartsReact在尝试将其与Node 8.17和React 15.4.2一起使用时都会引发某种错误。
如果我无法升级我的Node或React版本，我可以做些什么来使用它？

highcharts

来源：https://stackoverflow.com/questions/74694327/what-is-the-correct-version-of-highchartsreact-to-use-with-react-15-4-2

1条答案

按热度按时间

rjee0c151#

您可以相对容易地在React中为Highcharts图表创建自己的 Package 器。
第一步，请检查当前 Package 器版本的源代码：https://github.com/highcharts/highcharts-react/blob/master/src/HighchartsReact.js
您需要做的就是为图表创建HTML容器，在componentDidMount中创建图表，并在componentDidUpdate中处理图表更新。
React 15.4.2的建议实施：

class HighchartsReact extends React.Component {
  componentDidMount() {
    const props = this.props;
    const H = props.highcharts;
    const constructorType = props.constructorType || "chart";
    // Create chart
    this.chart = H[constructorType](this.container, props.options);
  }
  componentDidUpdate() {
    const props = this.props;
    const H = props.highcharts;
    const constructorType = props.constructorType || "chart";

    if (props.allowChartUpdate !== false) {
      if (!props.immutable && this.chart) {
        this.chart.update(props.options, ...(props.updateArgs || [true, true]));
      } else {
        this.chart = H[constructorType](this.container, props.options);
      }
    }
  }
  componentWillUnmount() {
    this.chart.destroy();
  }
  render() {
    var self = this;
    var containerProps = this.props.containerProps || {};
    // Add ref to div props
    containerProps.ref = function (container) {
      self.container = container;
    };
    // Create container for our chart
    return React.createElement("div", containerProps);
  }
}

现场演示：https://codesandbox.io/s/highcharts-react-demo-nd8uv3?file=/HighchartsReact.jsx

赞(0）回复(0）举报 2022-12-13

我来回答

与React 15.4.2一起使用的HighchartsReact的正确版本是什么？

1条答案

相关问题

热门标签

最新问答