Question

var temp = React.CreateClass({
    getConfig: function(data){
         //somecode and return a config for highchart
    },
    render: function() {
        var config = this.getConfig(this.props.Data);
        Highcharts.chart("idname", config);
        return (<div id="idname"></div>);
    }
});

使用这种代码，将Highcharts放在渲染函数中，会出现错误：Highcharts错误＃13

如果我将代码更改为以下类型，则会显示确定。图表没问题，没有错误。

var temp = React.CreateClass({
    componentWillReceiveProps: function(data){
         //somecode and get the config for highchart
         Highcharts.chart("idname", config);
    },
    render: function() {
        return (<div id="idname"></div>);
    }
});

我的问题是：我可以将Highcharts.chart("idname", config)作为render函数作为第一种情况。如果没问题，怎么样？如果我无法将Highcharts.chart("idname", config)放入render函数中，为什么？

Answer 1

第一个场景

var temp = React.CreateClass({
    getConfig: function(data){
         //somecode and return a config for highchart
    },
    render: function() {
        var config = this.getConfig(this.props.Data);
        Highcharts.chart("idname", config);
        return (<div id="idname"></div>);
    }
});

错误是由于HightChart无法找到目标HTML来呈现图表。它清楚地表明您是否遵循error page。在第一个场景中，您在渲染DOM之前调用HighCharts。所以你的高图显然无法在那里找到元素。首先渲染元素，然后在其上应用图表。

第二种情况

var temp = React.CreateClass({
    componentWillReceiveProps: function(data){
         //somecode and get the config for highchart
         Highcharts.chart("idname", config);
    },
    render: function() {
        return (<div id="idname"></div>);
    }
});

您正在反应挂钩componentWillReceiveProps中创建图表，这在渲染完成时调用。因此Highchart能够找到绑定图表的目标ID。

调用此挂钩的一个警告是，在挂载的组件接收新道具之前调用componentWillReceiveProps()。如果没有新道具，则无法保证被调用。你应该使用componentDidMount()钩子，如果你的渲染完成它的工作就会被调用。查看docs

希望这有帮助！

为什么我不能将highcharts.chart放在渲染中？

1 个答案: