javascript - 我应该如何处理 React 组件库中的国际化？

Question

我可以找到很多关于如何在 React 应用程序中进行国际化的示例，但我找不到任何组件库。

我正在使用短语应用程序，我想知道是否有人建议如何以一种好的方式做到这一点。

所有组件都接收应该使用的语言作为 Prop

所有翻译都在phraseapp

这是我工作的公司的组件库，因此该库将具有需要翻译的默认标签

我认为的选项:

在 apollo 客户端存储中加载当前语言的键/值并创建一个助手来获取给定键

的值

尝试使用这样的库:https://github.com/phrase/react-intl-phraseapp但我不知道是否可以工作，因为不是 SPA

Answer 1

所以我们最终使用了react-intl ，导出包裹在 IntlProvider 中的每个组件只需要任何语言环境和消息。 IntlProvider 的配置在构造函数中设置为组件状态:

    this.state = {
       i18nCfg: IntlUtils.init(props.language, 'SignOutMenu')
    }

...然后设置在组件的 render() :

    render() {
      const { i18nCfg } = this.state;
      return (
         <IntlProvider locale={i18nCfg.language} messages={i18nCfg.messages}>

...

语言环境可以由 injectIntl 给出的父组件提供HOC

<SignOutMenu language={this.props.intl.locale}/>

或使用 util 方法从浏览器中检测到 getUserLanguage()在 init()如果没有定义语言。

您只需要注意防止在应用程序中重复出现消息 id，因此我使用命名空间字符串初始化组件，该字符串表示仅与给定组件相关的消息(在 getMessages() 中完成):

    import {addLocaleData} from 'react-intl';
    import en from 'react-intl/locale-data/en';
    import de from 'react-intl/locale-data/de';
    import messagesEn from '../locales/lang/i18n_en.json';
    import messagesDe from '../locales/lang/i18n_de.json';

    const defaultLanguage = 'en';
    const supportedLanguages = ['en', 'de'];

    export default class IntlUtils {

       static init = (language, namespace) => {
          // add the supported locale data
          addLocaleData([...en, ...de]);

          // get supported language
          const lang = language && supportedLanguages.indexOf(language) > -1 ? language : IntlUtils.getUserLanguage();

          // return back data for IntlProvider
          return {
             language: lang,
             messages: IntlUtils.getMessages(lang, namespace)
          }
       }

       static getMessages = (language, namespace) => {
          let langMsgs;
          switch (language) {
             case 'de': langMsgs = messagesDe; break;

             case 'en':
             default: langMsgs = messagesEn;
          }

          if (langMsgs) {
             const matchNS = namespace + ".";
             const filtered = {};
             for (var key in langMsgs) {
                if (key.startsWith(matchNS)) {
                   filtered[key] = langMsgs[key];
                }
             }
             return filtered;
          }
       }

       static getUserLanguage = () => {
          //if none available, take it from browser
          const browserLanguage = window.navigator.userLanguage || window.navigator.language;
          if (browserLanguage) {
             // get the language code and store it in local prefs for nexttime
             const m = browserLanguage.match(/^([a-z]+)/i);
             if (m) {
                return m[0];
             }
          }
          // nothing found -> return default en
          return defaultLanguage;
       }
    }

为了能够导入 IntlUtil中的json文件，我必须安装“babel-plugin-inline-json-import”的 devDependency 并将其添加到 .babelrc 文件中:

   "plugins": [
      ["inline-json-import", {}]
   ]

我还发现使用带有方法 formatMessage() 的 injectIntl​​ HOC在 IntlProvider 初始化为 HOC 使用 IntlProvider 实例的同一组件中无法正常工作来自上面组件的消息)。

请注意，我们的语言切换机制涉及到页面的刷新，所以它就像 init() 的魅力。 .但是，当您在不刷新页面的情况下切换语言时，我不能说在使用 context 或 redux 的情况下它的效果如何。但是我们很快就会在一个这样的应用程序中使用它，所以我可能会在这里发布更新......

希望这至少对您和其他人有所帮助