react-intl實(shí)現(xiàn)React國(guó)際化多語言的方法
本文主要介紹了react-intl實(shí)現(xiàn)React國(guó)際化多語言的方法,分享給大家,具體如下:
效果預(yù)覽
React Intl 國(guó)際化步驟
- 創(chuàng)建國(guó)際化資源文件
- 根據(jù)語言獲取國(guó)際化資源
- 引入 react-intl 的 local data
- 創(chuàng)建 LocaleProvider 國(guó)際化上下文組件
- 創(chuàng)建 react-intl 國(guó)際化上下文組件
- 使用 react-intl's components & apis,進(jìn)行國(guó)際化開發(fā)
1. 創(chuàng)建國(guó)際化資源文件
目前我們管理資源文件的方式是在 src/locales 文件夾下:
. ├── en-US.js ├── en-US.messages.js ├── zh-Hans.js └── zh-Hans.messages.js
*.messages.js 是我們的資源文件(這里我們采用了 js 格式,你也可以使用 json 等等),返回的是一個(gè)對(duì)象,key 為我們翻譯用的 id,value 為具體語言的翻譯,內(nèi)容是:
export default { 'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.', 'page.localeProvider.react.html': '<p>{ name } makes it painless to create interactive UIs. Design simple views for each state in your application, and { name } will efficiently update and render just the right components when your data changes.</p><p>Declarative views make your code more predictable and easier to debug.</p>', 'page.localeProvider.unreadCount': 'You have {unreadCount} new {notifications}', 'page.localeProvider.title.date': 'Current date: ', 'page.localeProvider.title.time': 'Current time: ', 'page.localeProvider.title.relative': 'Relative current time: ', 'page.localeProvider.title.number': 'Comma number: ', 'page.localeProvider.title.price': 'Price: ', 'page.localeProvider.title.percent': 'Percent: ', };
en-US.js 文件封裝了 messages、locale 等國(guó)際化上下文組件需要的內(nèi)容:
import appLocaleData from 'react-intl/locale-data/en'; // 引入組件多語言 import paginationLocale from '@/components/pagination/locales/en-US'; import messages from './en-US.messages'; window.appLocale = { // 合并所有 messages, 加入組件的 messages messages: Object.assign({}, messages, { Pagination: paginationLocale, }), // locale locale: 'en-US', // react-intl locale-data data: appLocaleData, // 自定義 formates formats: { date: { normal: { hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }, }, // 貨幣 money: { currency: 'USD', }, }, }; export default window.appLocale;
有了這些資源文件以及相關(guān)的封裝之后,我們就可以在 LocaleProvider 和 InltProvider 中使用了。
2. 根據(jù)語言加載國(guó)際化資源
上一步我們創(chuàng)建了不同語言版本的國(guó)際化資源文件,我們還需要一個(gè)函數(shù)能夠根據(jù)語言,加載對(duì)應(yīng)的資源文件:
/** * 獲取國(guó)際化資源文件 * * @param {any} lang * @returns */ function getLocale(lang) { let result = {}; switch (lang) { case 'zh-CN': result = require('./locales/zh-Hans'); break; case 'en-US': result = require('./locales/en-US'); break; default: result = require('./locales/zh-Hans'); } return result.default || result; }
3. 引入 react-intl 的 local data
import { addLocaleData } from 'react-intl'; ... render() { const appLocale = getLocale('en-US'); addLocaleData(...appLocale.data); ... }
react-intl 在做國(guó)際化的時(shí)候需要一些特有的 local data,主要是進(jìn)行相對(duì)時(shí)間翻譯時(shí),比如昨天、今天、明天、幾分鐘前、幾個(gè)月前之類的。我們通過 addLocaleData 這個(gè)方法加載相關(guān)內(nèi)容,大家可以根據(jù)實(shí)際情況加載需要的 locale-data。
4. 創(chuàng)建 LocaleProvider 國(guó)際化上下文組件
為了組件能夠國(guó)際化資源信息,我們需要一個(gè) LocaleProvider 組件,用它來提供國(guó)際化的上下文,具體用法:
export default class LocaleProvider extends React.Component { static propTypes = { children: PropTypes.any, locale: PropTypes.object, }; static childContextTypes = { // 語言信息 locale: PropTypes.object, }; getChildContext() { return { locale: { ...this.props.locale, }, }; } render() { return React.Children.only(this.props.children); } }
5. 創(chuàng)建 react-intl 國(guó)際化上下文組件
為了能夠使用 react-intl 進(jìn)行國(guó)際化,跟 redux 這些框架一樣,我們需要一個(gè) Provider Component,用它來提供國(guó)際化的上下文,具體用法:
... import { addLocaleData, IntlProvider } from 'react-intl'; import LocaleProvider from '@/components/locale-provider'; import Home from '@/views/home'; ... render() { // 根據(jù)語言獲取國(guó)際化資源 const appLocale = getLocale('en-US'); addLocaleData(...appLocale.data); return ( <LocaleProvider locale={appLocale}> <IntlProvider locale={appLocale.locale} messages={appLocale.messages} formats={appLocale.formats} > <Home /> </IntlProvider> </LocaleProvider> ); }
LocaleProvider 有三個(gè)配置參數(shù):
- locale, <object>, 國(guó)際化資源.
IntlProvider 有三個(gè)配置參數(shù):
- locale, <string>, 語言標(biāo)記,例如 'zh-CN' 'en-US'
- messages, <object>, 國(guó)際化所需的 key-value 對(duì)象
- formats, <object>, 自定義 format,比如日期格式、貨幣等
在定義好 IntlProvider 之后,我們就可以在頁面使用它提供的 api 或者組件來進(jìn)行國(guó)際化了。
6. 使用 react-intl's components & apis
react-intl 提供了豐富的組件和 api 來完成頁面部分的國(guó)際化。
字符串的格式化
a. <FormattedMessage /> 這個(gè)組件用于格式化字符串,是所有的組件中使用頻率最高的組件。除了可以根據(jù)配置輸出不同語言的簡(jiǎn)單字符串之外,還可以輸出包含動(dòng)態(tài)變化的參數(shù)的復(fù)雜字符串,具體的用法在后面的例子中會(huì)慢慢敘述。
比如我們?cè)?*.message.js 配置文件中寫了如下內(nèi)容:
export default { 'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.', };
使用這個(gè)組件的時(shí)候,我們這么寫:
<FormattedMessage tagName="p" id="page.localeProvider.react" values={{ name: 'React', }} defaultMessage="{name} 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。" description="{name} 是什么?" />
- id 指代的是這個(gè)字符串在配置文件中的屬性名
- description 指的是對(duì)于這個(gè)位置替代的字符串的描述,便于維護(hù)代碼,不寫的話也不會(huì)影響輸出的結(jié)果
- defaultMessage 當(dāng)在locale配置文件中沒有找到這個(gè)id的時(shí)候,輸出的默認(rèn)值
- tagName 實(shí)際生成的標(biāo)簽,默認(rèn)是 span
- values 動(dòng)態(tài)參數(shù). 格式為對(duì)象
輸出的結(jié)果:
<p>React, a JavaScript library for building user interfaces.</p>
b. <FormattedHTMLMessage />這個(gè)組件的用法和完全相同,唯一的不同就是輸出的字符串可以包含HTML標(biāo)簽。
日期時(shí)間
a. <FormattedDate /> 用于格式化日期,能夠?qū)⒁粋€(gè)時(shí)間戳格式化成不同語言中的日期格式。
傳入時(shí)間戳作為參數(shù):
<FormattedDate value={new Date(1459832991883)} />
輸出結(jié)果:
<!-- 英文 -->
<span>4/5/2016</span><!-- 中文 -->
<span>2016/5/4</span>
b. <FormattedTime> 用于格式化時(shí)間,效果與<FormattedDate />相似。
傳入時(shí)間戳作為參數(shù):
<FormattedTime value={new Date(1459832991883)} />
輸出結(jié)果:
<!-- 英文 -->
<span>1:09 AM</span><!-- 中文 -->
<span>上午1:09</span>
c. <FormattedRelative /> 通過這個(gè)組件可以顯示傳入組件的某個(gè)時(shí)間戳和當(dāng)前時(shí)間的關(guān)系,比如“10 minutes ago”。
傳入時(shí)間戳作為參數(shù):
<FormattedRelative value={Date.now()} />
輸出結(jié)果:
<!-- 英文 =>> 運(yùn)行時(shí)的輸出結(jié)果: -->
<span>now</span><!-- 英文 =>> 10秒之后的輸出結(jié)果: -->
<span>10 seconds ago</span><!-- 英文 =>> 1分鐘之后的輸出結(jié)果: -->
<span>1 minute ago</span><!-- 中文 =>> 運(yùn)行時(shí)的輸出結(jié)果: -->
<span>現(xiàn)在</span><!-- 中文 =>> 10秒之后的輸出結(jié)果: -->
<span>10秒前</span><!-- 中文 =>> 1分鐘之后的輸出結(jié)果: -->
<span>1分鐘前</span>
數(shù)字量詞
a. <FormattedPlural /> 這個(gè)組件可用于格式化量詞,在中文的語境中,其實(shí)不太會(huì)用得到,比如我們說一個(gè)雞腿,那么量詞就是‘個(gè)',我們說兩個(gè)雞腿,量詞還是‘個(gè)',不會(huì)發(fā)生變化。但是在英文的語言環(huán)境中,描述一個(gè)蘋果的時(shí)候,量詞是apple,當(dāng)蘋果數(shù)量為兩個(gè)時(shí),就會(huì)變成apples,這個(gè)組件的作用就在于此。
傳入組件的參數(shù)中,value為數(shù)量,其他的為不同數(shù)量時(shí)對(duì)應(yīng)的量詞,在下面的例子中,一個(gè)的時(shí)候量詞為message,兩個(gè)的時(shí)候量詞為messages。實(shí)際上可以傳入組件的量詞包括 zero, one, two, few, many, other 已經(jīng)涵蓋了所有的情況。
結(jié)合 <FormattedMessage />運(yùn)用:
const unreadCount = 10; const unreadCount2 = 1; ... <p> <FormattedMessage id="page.localeProvider.unreadCount" defaultMessage={'你有{ unreadCount }條新信息'} values={{ unreadCount: ( <strong style={{ color: '#f30', fontWeight: 'normal', }} > <FormattedNumber value={unreadCount} /> </strong> ), notifications: ( <FormattedPlural value={unreadCount} one="notification" other="notifications" /> ), }} /> </p> <p> <FormattedMessage id="page.localeProvider.unreadCount" defaultMessage={'你有{ unreadCount2 }條新信息'} values={{ unreadCount: ( <strong style={{ color: '#f30', fontWeight: 'normal', }} > <FormattedNumber value={unreadCount2} /> </strong> ), notifications: ( <FormattedPlural value={unreadCount2} one="notification" other="notifications" /> ), }} /> </p>
輸出結(jié)果:
<!-- 英文 -->
<p>You have 10 new notifications</p>
<p>You have 1 notification</p><!-- 中文 -->
<p>你有10條新信息</p>
<p>你有1條新信息</p>
b. <FormattedNumber /> 這個(gè)組件最主要的用途是用來給一串?dāng)?shù)字標(biāo)逗號(hào),比如10000這個(gè)數(shù)字,在中文的語言環(huán)境中應(yīng)該是1,0000,是每隔4位加一個(gè)逗號(hào),而在英語的環(huán)境中是10,000,每隔3位加一個(gè)逗號(hào)。
傳入數(shù)字作為參數(shù):
<FormattedNumber value={1000} />
輸出結(jié)果:
<span>1,000</span>
<FormattedNumber /> 輸出百分比
傳入小數(shù)作為參數(shù):
<FormattedNumber value={0.5} style="percent" />
輸出結(jié)果:
<span>50%</span>
<FormattedNumber /> 輸出貨幣
傳入數(shù)字作為參數(shù):
// locale.formats.money.currency 是 /locales/*.js 國(guó)際化資源配置的貨幣信息。中文: 'CNY'; 英文: 'USD' <FormattedNumber value={123456.78} style="currency" currency={locale.formats.money.currency} />
輸出結(jié)果:
<!-- 英文 -->
<span>$123,456.78</span><!-- 中文 -->
<span>¥123,456.78</span>
注:項(xiàng)目在中文情況下也是每隔3位加一個(gè)逗號(hào),具體原因詳,如果有知道原因的請(qǐng)告知。
組件國(guó)際化
1. 創(chuàng)建獲取上下文國(guó)際化資源函數(shù)
/** * 獲取 組件的語言配置 * * @param {any} props 屬性 * @param {any} context 上下文 * @param {any} componentName 組件名. 對(duì)應(yīng) context.locale.messages 中的 key 值 * @param {any} getDefaultLocale */ function getComponentLocale(props, context, componentName, getDefaultLocale) { let locale = {}; // 如果 context 上下文中有多語言配置. 則取 context 上下文中的多語言值. // 否則, 取默認(rèn)值的多語言值. if (context && context.locale && context.locale.messages[componentName]) { locale = context.locale.messages[componentName]; } else { const defaultLocale = getDefaultLocale(); locale = defaultLocale.default || defaultLocale; } let result = { ...locale, }; // 如果屬性有語言配置項(xiàng), 則合并. if (props.locale) { result = { ...result, ...props.locale, }; if (props.locale.lang) { result.lang = { ...locale.lang, ...props.locale.lang, }; } } return result; }
2. 創(chuàng)建國(guó)際化的組件
... import { getComponentLocale } from '../_utils/getLocale'; ... export default class Pagination extends React.Component { // context 上下文 static contextTypes = { locale: PropTypes.object, }; render() { const currentlocale = getComponentLocale(this.props, this.context, 'Pagination', () => { require('./locales/zh-CN'); }); return ( <div className="pagination"> <div className="pagination__wrapper"> <div className="pagination__button__prev"> <a>{currentlocale.prevText}</a> </div> <div className="pagination__button__next"> <a>{currentlocale.nextText}</a> </div> </div> </div> ); } }
國(guó)際化規(guī)范附錄
React Intl 編寫規(guī)范
- 必須填寫 defaultMessage,并將 defaultMessage 作為中文翻譯
- id 不得重復(fù)
- 在使用 intl.formatMessage() 時(shí),必須使用 defineMessages,預(yù)定義消息
源碼
整個(gè)項(xiàng)目源碼
資料
到此這篇關(guān)于react-intl實(shí)現(xiàn)React國(guó)際化多語言的方法的文章就介紹到這了,更多相關(guān)React國(guó)際化多語言內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React中useEffect原理的代碼簡(jiǎn)單實(shí)現(xiàn)詳解
React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過一個(gè)簡(jiǎn)單的例子解釋如何用代碼實(shí)現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下2023-12-12詳解三種方式在React中解決綁定this的作用域問題并傳參
這篇文章主要介紹了詳解三種方式在React中解決綁定this的作用域問題并傳參,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08React虛擬渲染實(shí)現(xiàn)50個(gè)或者一百個(gè)圖表渲染
這篇文章主要為大家介紹了React虛擬渲染實(shí)現(xiàn)50個(gè)或者100個(gè)圖表渲染的實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06react+axios實(shí)現(xiàn)github搜索用戶功能(示例代碼)
這篇文章主要介紹了react+axios實(shí)現(xiàn)搜索github用戶功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖(Debounce)技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫,它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下2023-11-11