我正在处理当用户更新语言环境时,我需要更新 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);