React-Intl如何从变量切换语言环境和消息

如果您从根目录删除所有内容，则可以使用：

ReactDOM.render(<TodoApp />, document.getElementById('root'));

但是现在我们像这样更改TodoApp组件：

1）我们添加’locale’作为组件状态并导入React-Intl：

import { IntlProvider, addLocaleData } from 'react-intl';import intlEN from 'react-intl/locale-data/en';import intlES from 'react-intl/locale-data/es';import intlMessagesES from './../i18n/locales/es.json';import intlMessagesEN from './../i18n/locales/en.json';addLocaleData([...intlEN, ...intlES]);let i18nConfig = {    locale: 'en',    messages: intlMessagesEN};

2）更改我们的changeLanguage函数（这次称为“ onChangeLanguage”），此函数从子组件语言选择器接收“ lang”：

onChangeLanguage(lang) {        switch (lang) { case 'ES': i18nConfig.messages = intlMessagesES; break; case 'EN': i18nConfig.messages = intlMessagesEN; break; default: i18nConfig.messages = intlMessagesEN; break;        }        this.setState({ locale: lang });        i18nConfig.locale = lang;}

最后渲染：

render() {        return ( <IntlProvider key={ i18nConfig.locale } locale={ i18nConfig.locale }  messages={ i18nConfig.messages }>     <div>         <Header onChangeLanguage={this.onChangeLanguage} />         // Other components ...     </div> </IntlProvider>        );    }

如果有人根本听不懂，请在评论中提问！感谢@TomásEhrich