无需 redux 即可动态更改语言环境

Question

我想知道是否可以动态更改语言环境并在不使用 redux 的情况下重新呈现应用程序。

ReactDOM.render(
<IntlProvider locale={window.locale} messages={window.messages} >
    <Router history={history}>
        <App /> 
    </Router>
</IntlProvider>,
document.getElementById('root'));
registerServiceWorker();

Answer 1

您可以在 IntlProvider 之上拥有容器组件，并将语言环境作为道具传递。但是我想传递组件树会非常乏味：

class Container extends React.Component {
  state: {
    locale: window.locale
  }

  changeLocale = (locale) => this.setState({ locale })

  render() {
    return (
      <IntlProvider locale={this.state.locale} messages={window.messages} >
        <Router history={history}>
          <App changeLocale={this.changeLocale} /> 
        </Router>
      </IntlProvider>,
    )
  }
}