zoukankan      html  css  js  c++  java
  • [React Intl] Install and Configure the Entry Point of react-intl

    We’ll install react-intl, then add it to the mounting point of our React app.

    Then, we’ll use react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

    We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

     

    Install:

    npm install --save react-intl

    index.js:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import { addLocaleData, IntlProvider } from 'react-intl';
    import en from 'react-intl/locale-data/en';
    import fr from 'react-intl/locale-data/fr';
    import es from 'react-intl/locale-data/es';
    
    import messages from './messages';
    
    import App from './App';
    import './index.css';
    
    addLocaleData([...en, ...fr, ...es]);
    
    let locale = (navigator.languages && navigator.languages[0])
                 || navigator.language
                 || navigator.userLanguage
                 || 'en-US';
    
    ReactDOM.render(
      <IntlProvider locale={locale} messages={messages[locale]}>
        <App />
      </IntlProvider>,
      document.getElementById('root')
    );

    For messages.js, it contains all the translations:

    export default {
      'en-US': {
        detail: {
          toggle: 'Toggle',
          purchase: 'Purchase this book from:',
          reviewsHeading: 'Reviews'
        }
      },
      'es-ES': {
        detail: {
          toggle: 'Palanca',
          purchase: 'Compre este libro de:',
          reviewsHeading: 'Comentarios'
        }
      },
      'fr-FR': {
        detail: {
          toggle:'Basculer',
          purchase: 'Achetez ce livre à partir de:',
          reviewsHeading: 'Avis'
        }
      }
    }

    It is recommended to use flatten structures. So we can use fatten utils:

    export function flattenMessages(nestedMessages, prefix = '') {
      return Object.keys(nestedMessages).reduce((messages, key) => {
        let value = nestedMessages[key];
        let prefixedKey = prefix ? `${prefix}.${key}` : key;
    
        if (typeof value === 'string') {
          messages[prefixedKey] = value;
        } else {
          Object.assign(messages, flattenMessages(value, prefixedKey));
        }
    
        return messages;
      }, {});
    }

    Modify provider to use flattenMessages method:

    ReactDOM.render(
      <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
        <App />
      </IntlProvider>,
      document.getElementById('root')
    );

    The way to use it:

    import { FormattedMessage } from 'react-intl';
    
    <FormattedMessage id="detail.toggle"/>
  • 相关阅读:
    93.修改私有属性的值
    92.私有属性和私有方法
    91.多层继承
    python基础入门之四 —— 列表
    python基础入门之三 —— 字符串
    python基础入门之二 —— 条件、循环语句
    如何将本地图片变成图片链接
    python基础入门之一 —— 变量与运算符
    Elasticserach 配置文件详解
    elasticserch:性能优化策略
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7252037.html
Copyright © 2011-2022 走看看