Question

我有一个上级组件，其中使用了上级highchart组件。像这样

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>
    )
  }
}

我的highchart（child）组件看起来像这样

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生产版本是否存在任何问题，或者我在这里做错了什么？

谢谢！

Answer 1

Highchart库给出的错误意味着它找不到您提供的id的div。似乎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} />)
}

Here is a minimal example和我在这里提到的所有内容。

动态高图表渲染不起作用

1 个答案: