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"/>
  • 相关阅读:
    条形码分类
    ubuntu下配置j2ee开发环境——sunjdk1.6的安装
    折腾的这几天
    Windows Phone 8 开发环境搭建
    Windows Phone SDK 8.0的安装软硬件配置要求
    ubuntu连接无线网遇到的错误和解决思路总结(无具体过程)
    解析html标签并转化成图片
    javaIO的类备忘
    ubuntu下配置j2ee开发环境——sunjdk1.7的配置
    Jmeter之JDBC Request及参数化
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7252037.html
Copyright © 2011-2022 走看看