Question

我有一个'external'intl提供程序，因为我必须处理react组件之外的一些标签。我正在尝试动态加载语言环境而不使用require语句，但遇到一个问题，我不确定为什么会这样。因此，以下代码有效：

//intlProvider.js
import { IntlProvider, addLocaleData } from 'react-intl';
import Locale from '../../../../utils/locale';

const locale = Locale.getLocale();
addLocaleData(require(`react-intl/locale-data/${locale}`));
const messages = Locale.getMessages('prot');
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

export default intl;

然后我在sharedMessages.js文件中读取了intl：

import { defineMessages } from 'react-intl';
import intl from '../components/i18n/Intl';

const messages = defineMessages({
  interest: {
    id: 'sharedMessages.rate.label',
    defaultMessage: 'Interest',
  },
  bank: {
    id: 'sharedMessages.bank.label',
    defaultMessage: 'Bank',
  },
});
function prepareSharedMessages() {
  const msgsObj = {};
  Object.keys(messages).forEach(item => {
    msgsObj[item] = intl.formatMessage(messages[item]);
  });
  return msgsObj;
}
const sharedMessages = prepareSharedMessages();

export default sharedMessages;

上面的代码可以正常工作，但是由于我想摆脱这一行中的require语句（因为动态导入会大大增加包的数量）：

addLocaleData(require(`react-intl/locale-data/${locale}`));

我尝试将其替换为：

(async localeCode => {
  const localeData = await import(`react-intl/locale-data/${localeCode}`);
  addLocaleData(localeData.default);
})(locale);

预期的行为 我希望语言环境能够正确加载，但是显然应用程序正在尝试先获取它。由于我正在使用 async / await ，我希望在应用程序的其余部分尝试使用它之前先进行设置。（如果它是在React组件内部，我可以使用 componentDidMount 来触发语言环境，但是如何为非React组件实现此行为？）

当前行为 在替换了上面提到的import语句的require之后，我得到了react-intl警告：

[React Intl]缺少语言环境“ de”的语言环境数据。使用默认语言环境：“ en”作为备用。

我的环境：

react-intl 2.7.0
反应16.0.0
节点9.10.0

操作系统：macOS Mojave 10.14

浏览器版本：Chrome 71.0.3578.98（正式版本）（64位）

使用async / await在addLocaleData

0 个答案: