动态更新 react-google-chart 类型

Question

我想使用选择框来更改 react-google-chart 的图表类型。代码如下所示：

const GoogleGraph = ({chartType, handleChartTypeChange}) => (
        <section>
            <Selector
                chartType={chartType}
                handleChartTypeChange={handleChartTypeChange}
            />
            <Chart
                chartType={chartType}
                data={data}
                options={options}
                graphID={chartType}
                width="100%"
                height="10em"
                chartEvents={chartEvents}
            />
        </section>
    );

更改了“选择框”时，我将获得我期望的数据，就像我在调试器中看到的那样，ChartType Prop已从“ bar”更改为“线”，但是在渲染完成后，图表仍然是条形图。我没有收到错误消息。

是否可以动态更新chartType？

Answer 1

如果所有其他方法都失败了，您还可以将chartType 用作key，这将使React 丢弃当前组件并在chartType 更改时创建一个全新的组件。

const GoogleGraph = ({ chartType, handleChartTypeChange }) => (
  <section>
    <Selector
      chartType={chartType}
      handleChartTypeChange={handleChartTypeChange}
    />
    <Chart
      key={chartType}
      chartType={chartType}
      data={data}
      options={options}
      graphID={chartType}
      width="100%"
      height="10em"
      chartEvents={chartEvents}
    />
  </section>
);

Answer 2

更新为通用 HTML Select

const GoogleGraph = ({ chartType, handleChartTypeChange, data, options }) => (
	<section>
		<select value={chartType} onChange={handleChartTypeChange}>
			<option value="PieChart">PieChart</option>
			<option value="BarChart">BarChart</option>
		</select>
		<Chart
			key={chartType}
			chartType={chartType}
			width={'80vw'}
			height={'80vh'}
			loader={<div>Loading Chart</div>}
			data={data}
			options={options}
			graphID={chartType}
		/>
	</section>
);