代码之家 › 专栏 › 技术社区 › ashb

如何从组件内部更新Highchart?

highcharts reactjs

ashb · 技术社区 · 6 年前

componentWillUpdate 已弃用(严格模式)。我们有一个反应包装 Highcharts 并用于更新 highchart 在里面 组件将更新 在渲染之前运行。

但现在在react 16.3中,当输入 highchartoptions 道具更新,似乎没有办法打电话 Highchart.update 之前 render() componentDidUpdate 但只有在 render() 而且似乎根本不起作用。任何建议都会有帮助。

此处的代码段:

export class HighchartReactWrapper extends React.Component {
  constructor(props) {
    super(props);

    // We maintain the user provided options being used by highchart as state
    // inorder to check if chart update is needed.
    this.state = { highChartOptions: this.props.options };
    this.onChartRendered = this.onChartRendered.bind(this);
  }

  componentDidMount() {
    // Create chart
    this.chart = new Highcharts.Chart(this.container, this.state.highChartOptions, this.onChartRendered);
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.options !== prevState.options) {
      return { highChartOptions: nextProps.options };
    }
  }

  componentDidUpdate() {
    this.chart.update(this.state.highChartOptions, false, true); <---- Doesn't work
  }

  onChartRendered() {
    // Callbacks..
    if (this.props.onChartRenderedCallback !== undefined) {
      this.props.onChartRenderedCallback();
    }
  }

  componentWillUnmount() {
    // Destroy chart
    this.chart.destroy()
  }

  render() {
    return (
      <div className="react-highchart-wrapper">
        <div id={container => this.container = container} />
      </div>
    );
  }
}

HighchartReactWrapper.propTypes = {
  /**
   * Chart options to be used in Highcharts library.
   */
  options: PropTypes.object.isRequired,
  onChartRenderedCallback: PropTypes.func
};

HighchartReactWrapper.defaultProps = {
  options: undefined,
  onChartRenderedCallback: undefined
};