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

我正在尝试弄清楚如何使用 React-Intl 更改语言。这是我的第一个 React 应用程序，它是用 create-react-app 制作的，我没有使用 Redux 或 Flux。

在我的 index.js 中，我有以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoApp from './components/TodoApp';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

// Bootstrap CSS libraries
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

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]);

/* Define your translations */
let i18nConfig = {
    locale: 'es',
    messages: intlMessagesES
};

let changeLanguage = (lang) => {
    i18nConfig = { locale: lang, messages: intlMessagesEN };
    return i18nConfig;
}

ReactDOM.render(
    <IntlProvider locale={ i18nConfig.locale } key={ i18nConfig.locale } messages={ i18nConfig.messages }>
        <TodoApp onChangeLanguage={changeLanguage} />
    </IntlProvider>,
    document.getElementById('root'));
registerServiceWorker();

当我更改时，TodoApp 通过 props 在“lang”参数上发送一个字符串（即：“es”或“en”）i18n配置IntlProvider 似乎没有任何变化。我的想法是改变我的i18n配置变量，那么我的所有应用程序也会更改语言。

我在 TodoApp 中有 FormattedMessages，我的两条 JSON 消息的填充方式如下：

// i18n/locales/en.json
{
  "footer.add.placeholder": "Enter a name ...",
  "footer.add.priority0.text": "No priority",
  "footer.add.priority1.text": "Priority 1",
   ...
}

你知道我的代码缺少什么吗？也许我对 React-Intl 的理解不正确。任何建议都会有帮助，谢谢。

如果您从 root 中删除所有内容，它就会起作用：

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]);

/* Define your default translations */
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