Динамически высокий рендеринг графиков не работает

Question

У меня есть родительский компонент, в котором я использовал родительский компонент старшей диаграммы.Примерно так

class MobHome extends Component {
  render() {
    return(
      <Link to="/graphdetails">
        <AreaSplineChart
          id="1keyTotalVisitor"
          key="keyTotalVisitor"
          className="graph-visitor"
          title="<strong>Total Visitors</strong>"
          subtitle={`This is all the users that have visited your <br/> site.
             <br/><span style='font-size:60px; color: #5BC0BE; font-weight:600'>
             ${ analyticsData.totalVisitors }</span>`}
          data={_.get(analyticsData, 'totalVisitorsGraphData', []).map(t => t.count)}
          categories={_.get(analyticsData, 'totalVisitorsGraphData', []).map(t => t._id)}
          filterType={this.state.filterType}
          graphData={_.get(analyticsData, 'totalVisitorsGraphData', [])}
        />
      </Link>
    )
  }
}

И мой компонент старшей диаграммы (дочерний) выглядит примерно так

componentWillReceiveProps (np) {
  if (this.props.data !== np.data) {
    this.highChartFunction(np)
  }
}
class AreaSplineChart extends Component {
  highChartFunction () {
    const { title, subtitle, id, data, categories, graphData } = this.props
    console.log(id)
    Highcharts.chart(String(id), {
      //... options
    })
  }

  render () {
    const { id } = this.props
    console.log(id)
    return (
      <div key={id} id={id}/>
    )
  }
}
export default AreaSplineChart

Теперь проблема работает правильно в моем режиме разработки, но выдает ошибку в рабочем режиме.

Error: Highcharts error #13: www.highcharts.com/errors/13

У меня везде есть консольные журналы, я уверен, что мой ids сначала рендерится, а затем вызывается моя функция.Но все же я получаю проблему.Есть что-нибудь с gatsby production build или я тут что-то не так делаю?

Спасибо !!!

Answer 1

Ошибка, выданная библиотекой Highchart, означает, что она не может найти div с указанным вами id.Казалось бы, componentWillReceiveProps вызывается перед рендерингом.

Я бы порекомендовал вам вызвать ваш highChartFunction внутри componentDidMount метода жизненного цикла и сохранить экземпляр Chart в свойстве класса для доступа к нему позже.componentDidMount вызывается сразу после первого вызова render, поэтому элемент должен быть создан в этой точке.

componentDidMount() {
    this.highChartFunction();
}

highChartFunction () {
    const { title, subtitle, id, data, categories, graphData } = this.props;

    this.chart = Highcharts.chart(String(id), {
      //... options
    });
}

Если вы хотите обрабатывать обновления реквизита, я бы порекомендовал использовать componentDidUpdate,поскольку componentWillReceiveProps помечен как устаревший и планируется удалить в React 17. Также, похоже, в нем есть некоторые ошибки.componentDidUpdate получает предыдущий props в качестве аргумента, чтобы вы могли проверить, требуется ли обновление:

componentDidUpdate(prevProps) {
    if ("somehow prevProps and this.props is different") { // Replace with check
        this.chart.update({
            // new options
        }, /* Here is an argument to set if the chart should be rerendered, you can set it if necessary */);
    }
}

Также не забудьте установить метод жизненного цикла componentWillUnmount для уничтожения диаграммы:

componentWillUnmount() {
    this.chart.destroy();
}

---

Личная рекомендация : я бы не стал использовать id для настройки графика, а вместо этого использовал бы Refs .Это ссылки на компонент, который, на мой взгляд, намного лучше, чем поиск id.

constructor() {
    this.chartContainer = React.createRef();
}

highChartFunction() {
    /* ... */
    Highcharts.chart(this.chartContainer.current, { ... });
}

render() {
    const { id } = this.props;
    return (<div key={id} id={id} ref={this.chartContainer} />)
}

---

Вот минимальный пример со всем, что я упомянул здесь.