Exemples pour expliquer l'implémentation React-intl du multilingue

Cet article présente principalement l'exemple de code pour l'implémentation multilingue dans React-intl. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

La fonction d'internationalisation des langues a récemment été ajoutée au projet.

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 réaliser 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 .Installer

npm install react-intl --save

2 Ajouter une référence

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

3. . Ajoutez le fichier de configuration des paramètres régionaux

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 de i18n, il encapsulera le composant racine de l'application afin que l'ensemble de l'application sera configuré dans le contexte d'i18n

Les deux éléments de configuration les plus importants 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 l'environnement linguistique actuel est le chinois, il affichera Bonjour. S'il s'agit d'un environnement anglais, il affichera Bonjour.

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 transférer dynamiquement des valeurs. valeurs dans FormattedMessage. L'attribut reçoit un objet JSON, qui affichera dynamiquement notre contenu.

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 Importer injectIntl

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

2.

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

J'ai utilisé Redux dans le projet. L'injection 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. cette fois, si nous voulons afficher une chaîne, nous pouvons 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é l'ID et le deuxième paramètre peuvent être transmis. Les paramètres sont transmis sous forme de valeurs. Pour des informations plus détaillées, veuillez consulter l'API

Recommandations associées :

Exploration de l'interne. mécanisme de React

Quelles sont les façons d'écrire des composants dans React

Connaissance du système d'événements React

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!