[React Intl] Install and Configure the Entry Point of react-intl
2017-07-28 18:31
429 查看
We’ll install
Then, we’ll use
We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.
Install:
index.js:
For messages.js, it contains all the translations:
It is recommended to use flatten structures. So we can use fatten utils:
Modify provider to use flattenMessages method:
The way to use it:
react-intl, then add it to the mounting point of our React app.
Then, we’ll use
react-intlhelpers 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"/>
相关文章推荐
- 【转】How to install and configure SharePoint Server 2010 SP1 on the existing SP 2010 Farm
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- Float and the form of expression of floating-point number in memory
- Step By Step Guide to configure the “Replicating directory changes” for SharePoint 2010 and 2013
- The ABCs of LDAP: How to Install, Run, and Administer LDAP Services
- [转] What is the point of redux when using react?
- Examing Joomsport (DAY 1) : Entry Point of Controller and Manifest & JRequast::getVar
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- How to hide my site and my document link in the right-top corner of sharepoint 2010
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- How to Install and Configure the RedBoot ROM Monitor
- Calculating The Logical Height and Point Size of a Font
- Calculating The Logical Height and Point Size of a Font
- Basic Tutorials of Redis(1) - Install And Configure Redis
- install and configure Microsoft SharePoint Server 2013 on Windows Server 2008 R2
- Wine's instruction,install and configure【For Ubuntu Feisty (7.04)】【WorldofWarcraft's installation】
- Install and configure GNS3 with TunTap on the Mac
- Changes in behavior of the SysPrep and RIPREP tools after you install Windows XP Service Pack 2
- how to install and configure Remote BLOB Storage (RBS) in a SharePoint 2013 farm
- Changes in behavior of the SysPrep and RIPREP tools after you install Windows XP Service Pack 2