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"/>
  • 相关阅读:
    Cookies
    一个完整的upstart脚本分析
    squid总结
    python递归读取目录列表
    python删除文件
    ubuntu切割mp3文件
    TP-LINK TL-WN725N V2 / rtl8188eu Linux驱动安装
    ubuntu启动脚本
    su对环境变量做了什么
    sudoers文件配置
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7252037.html
Copyright © 2011-2022 走看看