Explication détaillée d'exemples multilingues d'implémentation de React-intl

La fonctionnalité d'internationalisation de la langue a récemment été ajoutée au projet. Cet article présente principalement l'exemple de code pour implémenter le multilingue dans React-intl. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

L'internationalisation de la langue, que certains appellent la localisation de la langue, consiste en fait à ajouter plusieurs langues à l'application Web. Notre projet comprend actuellement des versions chinoises et anglaises. Logiquement, le « remplacement mot à mot » n'est pas le cas. C'est une grosse affaire, mais y a-t-il de l'argent à gagner avec une approche aussi basse ?

Au début, j'ai considéré la méthode traditionnelle d'ajout de fichiers de configuration à l'ensemble du projet. Selon les différentes langues et régions, le chargement de différents fichiers de configuration peut atteindre l'objectif de changement de langue d'interface. Bien entendu, c'est précisément parce que cette idée est trop naïve qu'elle est qualifiée d'idée « initiale ». L'internationalisation de la langue ne consiste pas seulement à traduire le texte de l'interface utilisateur dans une autre langue, mais inclut également l'affichage de la date et de l'heure, l'affichage numérique (une virgule tous les 3 chiffres dans l'environnement anglais : 1 000) et l'affichage du quantificateur (une pomme). . est une pomme, deux pommes devraient être des pommes), et il y a même un cas où une variable est insérée au milieu d'une chaîne ("J'ai mangé {count} pilons de poulet pour le déjeuner aujourd'hui")...

Il ne s'agit donc pas d'un simple problème de remplacement de caractères, mais nous devons également exporter facilement un répertoire et le mettre sous forme de mot ou de page afin que d'autres collègues puissent le comparer et le traduire. C'est très important ! ! Souhaitez-vous que le chef de produit apporte des modifications directement dans le code ? Ou souhaitez-vous rechercher et remplacer un par un ? Si vous le faites sans y réfléchir, croyez-moi, vous en paierez le prix.

En tant qu'aspirant codeur, vous ne voulez certainement pas ajouter une ligne de référence 2934a685527f5cd6bcb20a3dc28499e1 à index.html, n'est-ce pas ? De plus, tout le texte de l'interface utilisateur appartient à l'élève qui a utilisé l'image. Veuillez vous lever et sortir. Si vous souhaitez importer avec élégance quelque chose de quelque part dans un projet React, puis remplacer le texte dans l'interface par des composants 1dda6c662828d8c339fdfbf46fc13217 et enfin parvenir à l'internationalisation du langage grâce à une configuration simple, nous utiliserons React -intl.

Pour l'internationalisation de React, je recommande d'utiliser React-intl. Cette bibliothèque fournit des composants et des API React pour formater les dates, les nombres, les chaînes, etc. Maintenant que nous connaissons cette bibliothèque, commençons à l'utiliser

Utilisation des composants

Afin d'être plus intégré à React, nous pouvons utiliser des composants

1 .Installez

npm install react-intl --save

2. Ajouter une référence

import {IntlProvider, addLocaleData} from 'react-intl';

3. 🎜 >

zh-CN.js

const zh_CN = { 'intl.hello': "你好", 'intl.name': '我的名字是 {name}' } export default zh_CN;

en-US.js

const en_US = { 'intl.hello': "hello", 'intl.name': 'my name is {name}' } export default en_US;

4. Utilisez 1905fd125854d59ec1f7dec72e3298cf

Ce composant est utilisé pour définir le contexte d'i18n, il encapsulera le composant racine de l'application afin que l'ensemble de l'application soit configuré dans le contexte d'i18n.

La chose la plus importante Les deux éléments de configuration sont : loacle, les paramètres régionaux actuels, les messages et le contenu de la langue actuelle.

Nous voulons changer dynamiquement de langue, nous devons donc changer dynamiquement ces deux configurations.

import zhCN from './locale/zh.js';  //导入 i18n 配置文件
import enUS from './locale/en.js';

addLocaleData([...en, ...zh]);

export default class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { store , history } = this.props;
    return (
      <IntlProvider locale=&#39;zh&#39; messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5. Utiliser 12e09664183759a27c35bf8019a3976f

Utilisation de base

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={&#39;hello&#39;}
/>

Si la langue actuelle est le chinois, il affichera Bonjour. S'il s'agit d'un environnement anglais, il affichera Bonjour.

Transfert de valeur dynamique

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

Lorsque nous avons défini intl.name, {name} a été utilisé dans le modèle. Cela signifie que nous pouvons transmettre des valeurs de manière dynamique. FormattedMessage. Ceci est notre contenu qui sera affiché dynamiquement.

6. Utilisation d'autres composants

Ract-intl nous fournit une multitude de composants qui peuvent nous aider à traiter les chaînes, les heures et les dates. Vous pouvez vérifier l'API vous-même, le cas échéant. vous ne comprenez pas quelque chose, je peux laisser un message.

Utilisation de l'API

Parfois, nous pouvons avoir besoin d'effectuer une internationalisation dynamique dans le code, ce qui nécessite une API dynamique. Permettez-moi de vous présenter brièvement comment utiliser

1 Import injectIntl

import { injectIntl, FormattedMessage } from 'react-intl';

2. Injecter

.

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

J'ai utilisé Redux dans le projet. Lors de l'injection, cela devrait être comme ci-dessus. Si vous n'utilisez pas Redux, il vous suffit d'exporter par défaut injectIntl(App)

3. .Utilisez l'objet intl

Après la deuxième étape d'injection, nous allons maintenant obtenir un objet intl dans les accessoires du composant. Les méthodes qu'il fournit correspondent essentiellement aux composants que nous avons introduits ci-dessus à ce stade. pour afficher la chaîne, vous pouvez utiliser la méthode formatMessage :

const {intl} = this.props;
　　
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

Le premier paramètre de formatMessage peut être passé dans Id, et le deuxième paramètre est passé en valeurs, pour des informations plus détaillées, veuillez consulter l'API

Recommandations associées :

PHP - Implémentation de la commutation multilingue automatique

ASP.NET Core Explication graphique et textuelle détaillée de la prise en charge multilingue

Introduction détaillée à la prise en charge multilingue dans ASP.NET Core

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!