无法渲染两个相同的React组件,特别是react-google-chart [英] Cannot render two of the same React component, specifically react-google-chart
问题描述
我可以反应谷歌图表来呈现单个图表,而不会有任何麻烦。但是,当我尝试添加另一个图表类型的第二个图表时,它无法呈现它。这是因为它认为第二种图表类型与第一种图表类型完全相同。
I can get react google chart to render a single chart without any trouble. However, when I try and add a second chart of a different chart type, it fails to render it. This is because it thinks the second chart type is exactly like the first chart type. Here is a simple example of the problem.
render() {
return (
<div>
<div className="forcastingChart">
<Chart id="chart1" chartType="ColumnChart" data={this.state.data} width="100%" options={this.state.options}></Chart>
</div>
<div className="GanttChart">
<Chart id="chart2" chartType = "Gantt" columns={this.state.columns} rows={this.state.rows} chartPackages={['gantt']}
width="100%" height="9999px"></Chart>
</div>
</div>
);
}
它只能成功呈现我先列出的图表,在这种情况下,ColumnChart 。如果我要切换它们,只有甘特图可以成功加载。
It only successfully renders the chart I have listed first, in this case the ColumnChart. If I were to switch them around, only the Gantt chart would successfully load.
这是前一代代码呈现的图像。
Here is an image of what the previous code renders.
推荐答案
尝试更新您的react-google-charts节点模块,以确保您有甘特图类型适当的一个:
Try to update your react-google-charts node module to make sure that you have proper one with Gantt chart type:
npm update react-google-charts
您必须为每个图表使用不同的 graph_id 属性:
And you have to use different graph_id properties for each chart:
<div className="forcastingChart">
<Chart
graph_id="chart1"
id="chart1"
chartType="ColumnChart"
data={this.state.data}
width="100%"
options={this.state.options}>
</Chart>
</div>
<div className="GanttChart">
<Chart
graph_id="chart2"
id="chart2"
chartType = "Gantt"
columns={this.state.columns}
rows={this.state.rows}
chartPackages={['gantt']}
width="100%" height="9999px">
</Chart>
</div>
这篇关于无法渲染两个相同的React组件,特别是react-google-chart的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!