Как обновить Highchart изнутри реагирующего компонента?

Question

Я работаю с реакцией 16.3, где componentWillUpdate устарело (строгий режим). У нас есть оболочка реагирования около Highcharts, которая используется для обновления highchart в componentWillUpdate, которая запускается непосредственно перед рендерингом.

Но теперь в реакции 16.3, когда ввод highchartoptions prop обновляется, кажется, что нет способа вызвать 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
};

Answer 1

Вы можете использовать shouldComponentUpdate (nextProps, nextState) , который вызывается перед повторной визуализацией компонента.