Question

我正在使用https://github.com/yankouskia/localize-react进行应用程序的国际化。我有以下App类。

export default class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      title: "App title",
      language: "EN"
    };

    this.changeLanguage = this.changeLanguage.bind(this)
  }

  changeLanguage(language) {
    this.setState({
      language: language
    }, () => { console.log(this.state) })
  }

  render() {
    return (
      <LocalizationProvider
        disableCache={IS_LOCALIZE_CACHE_DISABLED}
        locale={this.state.language}
        translations={TRANSLATIONS}
      >
        <Router>
          <section>
            <section className="header">
              <Header />
            </section>
            <section className="content">
              <Route exact path="/" component={HomePage} />
              <Language changeLanguage={this.changeLanguage} />
            </section>
            <section className="footer">
              <Footer />
            </section>
          </section>
        </Router>
      </LocalizationProvider>
    );
  }
}

这是语言选择器组件：

export default class Language extends Component {

    render() {
        return (
            <div>
                <div className="flag-container">
                    <img onClick={() => this.props.changeLanguage("RO")} src="/static/svg/ro.svg" alt={'romana'} />
                    <img onClick={() => this.props.changeLanguage("EN")} src="/static/svg/gb.svg" alt={'english'} />
                </div>
            </div>
        )
    }
}

单击“语言”组件中的标记应翻译App子组件中的文本。确实如此。但是有一个陷阱。场景：

默认为EN。单击一次RO->作品。在EN上单击一次->有效；
默认为EN。单击一次EN->没有任何反应（正常）。在RO上单击一次->页面中没有任何变化。控制台日志显示state.language为RO。再次单击RO->有效。

因此，如果连续单击两次（或多次）任何图像，则需要两次单击另一个图像才能实际查看已翻译的页面。为什么从第一次点击起就无法正确渲染？在调用render方法之前，state.language始终是正确的。控制台示例：

RO - language before setState
EN - language after setState
app.js:42 render app
header.js:12 render header
app.js:36 {title: "App title", language: "EN"} - console.log in setState() callback

Answer 1

所以这里的问题是-下面的翻译功能没有将新的翻译返回到路由器。演示网站上的disableCache也是false，应将其设置为true。

请参见https://github.com/yankouskia/localize-react/issues/5

 <LocalizationProvider
        disableCache={IS_LOCALIZE_CACHE_DISABLED}
        locale={this.state.language}
        translations={TRANSLATIONS}
      >

我建议将您的本地化组件作为学习经验来编写-这类似于您的语言更改功能，该功能将从对象翻译= {en：1，fr：2}中返回键

也尝试使用es6箭头功能。

状态更改后，React组件并不总是呈现

1 个答案: