[React Intl] Install and Configure the Entry Point of react-intl

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7252037.html

文章标签：

#javascript #ViewUI

本文介绍如何使用react-intl库实现React应用的多语言支持。通过安装并配置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"/>

转载于:https://www.cnblogs.com/Answer1215/p/7252037.html