Dynamically change locale without redux

Question

I was wondering if it was possible to dynamically change the locale and have the app rerender without using 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>,
    )
  }
}