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"/>
  • 相关阅读:
    vs整合MySQL和QT
    VS2019中QT连接及使用
    JavaScript 进阶入门
    解决MySQL workbench的resultgird不出现的问题
    JavaScript入门
    CSS学习
    Linux下如何查看tomcat是否启动、查看tomcat启动日志
    oracle常见的函数
    java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncodingFilter
    位运算(&、|、^、~、>>、<<)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7252037.html
Copyright © 2011-2022 走看看