javascript - 如何动态更新 react-google-charts 的语言环境？

Question

我正在处理当用户更新语言环境时，我需要更新 React 谷歌图表语言环境的场景。
我已经创建了“语言”状态，单击时我调用函数 changeLanguage() 来更新语言环境。
但是它没有得到更新，并且默认语言环境保持不变。

如何解决这个问题，即在 react-google-charts 中动态更新语言环境？

以下是函数和等效渲染方法的代码：

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";

const data = [
  ["Element", "Density", { role: "style" }],
  ["Copper", 100000, "#b87333"], // RGB value
  ["Silver", 10.49, "silver"], // English color name
  ["Gold", 19.3, "gold"],
  ["Platinum", 21.45, "color: #e5e4e2"] // CSS-style declaration
];

const options = {
  vAxis: {
    format: 'short'
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en'
    };
  }

  changeLanguage = () => {
    this.setState({
      language: this.state.language === 'en' ? 'zh-cn' : 'en'
    })
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.changeLanguage}>Update: {this.state.language}</button>
        <Chart
          chartLanguage={this.state.language}
          chartType="ColumnChart"
          width="100%"
          height="400px"
          data={data}
         options={options}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

标签： javascriptreactjschartsgoogle-visualizationreact-google-charts