动态更新 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>
    );

When the select box is changed I am getting the data I expect as I can see in the debugger that the chartType prop has changed from "Bar" to "Line" however the chart remains a bar chart after render completes. 我没有收到错误。

是否可以动态更新图表类型？

Answer 1

如果所有其他方法都失败了，您还可以使用chartTypeaskey这将使 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>
);