Detaillierte Erläuterung mehrsprachiger Beispiele der React-intl-Implementierung

Vor Kurzem wurde dem Projekt eine Funktionalität zur Sprachinternationalisierung hinzugefügt. In diesem Artikel wird hauptsächlich der Beispielcode für die mehrsprachige Implementierung in React-intl vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Sprachinternationalisierung, manche nennen es Sprachlokalisierung, bedeutet tatsächlich, der Web-App mehrere Sprachen hinzuzufügen. Logischerweise ist dies nicht der Fall Das ist eine große Sache, aber lässt sich mit einem so niedrigen Ansatz Geld verdienen?

Zu Beginn habe ich über die traditionelle Methode nachgedacht, Konfigurationsdateien zum gesamten Projekt hinzuzufügen. Je nach Sprache und Region kann das Laden verschiedener Konfigurationsdateien den Zweck der Sprachumschaltung der Benutzeroberfläche erreichen. Natürlich wird diese Idee gerade deshalb als „ursprüngliche“ Idee bezeichnet, weil sie zu naiv ist. Bei der Internationalisierung der Sprache geht es nicht nur darum, den UI-Text auf der Benutzeroberfläche in eine andere Sprache zu übersetzen, sondern umfasst auch die Anzeige von Datum und Uhrzeit, die numerische Anzeige (ein Komma alle 3 Ziffern in der englischen Umgebung: 1.000) und die Anzeige von Quantoren (ein Apfel). . ist Apfel, zwei Äpfel sollten Äpfel sein), und es gibt sogar einen Fall, in dem eine Variable in die Mitte einer Zeichenfolge eingefügt wird („Ich habe heute {count} Hähnchenkeulen zum Mittagessen gegessen“)...

Das ist also nicht nur ein einfaches Zeichenersetzungsproblem, sondern wir müssen auch ein Verzeichnis einfach exportieren und in Word oder Seite einfügen, damit andere Kollegen es vergleichen und übersetzen können. Das ist sehr wichtig! ! Möchten Sie, dass der Produktmanager Änderungen direkt im Code vornimmt? Oder möchten Sie einzeln suchen und ersetzen? Wenn Sie es einfach tun, ohne darüber nachzudenken, glauben Sie mir, Sie werden dafür bezahlen.

Als angehender Programmierer möchten Sie auf jeden Fall keine Zeile mit 2934a685527f5cd6bcb20a3dc28499e1-Referenzen zu index.html hinzufügen, oder? Darüber hinaus gehört der gesamte Text in der Benutzeroberfläche dem Schüler, der das Bild verwendet hat. Bitte stehen Sie auf und gehen Sie raus. Wenn Sie etwas elegant von irgendwo in einem React-Projekt importieren möchten, dann den Text in der Schnittstelle durch cbc9e8d6aede4e34a6f85082eab44ea2

Diese Komponente wird verwendet, um den Kontext von i18n festzulegen. Sie umschließt die Stammkomponente der Anwendung, sodass die gesamte Anwendung im Kontext von i18n konfiguriert wird.
Das Wichtigste Die beiden Konfigurationselemente sind: Loacle, das aktuelle Gebietsschema, Nachrichten und der Inhalt der aktuellen Sprache.

Wir möchten die Sprache dynamisch wechseln, daher müssen wir diese beiden Konfigurationen dynamisch ändern.

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. Verwenden Sie 12e09664183759a27c35bf8019a3976f

Grundlegende Verwendung

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

Wenn das aktuelle Gebietsschema Chinesisch ist, wird „Hallo“ angezeigt. Wenn es sich um eine englische Umgebung handelt, wird „Hallo“ angezeigt.

Dynamische Wertübergabe

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

Als wir intl.name definiert haben, wurde {name} in der Vorlage verwendet. Dies bedeutet, dass wir ein JSON-Objekt dynamisch über das Werteattribut übergeben können Formatierte Nachricht: Unser Inhalt wird dynamisch angezeigt.

6. Verwendung anderer Komponenten

Ract-intl stellt uns eine Fülle von Komponenten zur Verfügung, die uns bei der Verarbeitung von Zeichenfolgen, Zeiten und Daten helfen können. Falls vorhanden, können Sie die API selbst überprüfen Wenn Sie etwas nicht verstehen, kann ich eine Nachricht hinterlassen.

API-Verwendung

Manchmal müssen wir möglicherweise eine dynamische Internationalisierung im Code durchführen, was eine dynamische API erfordert. Lassen Sie mich kurz vorstellen, wie Sie

1 verwenden. Importieren Sie injectIntl

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

2

Ich habe Redux im Projekt verwendet, es sollte wie oben sein. Wenn Sie Redux nicht verwenden, müssen Sie nur standardmäßig injectIntl(App) exportieren.

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

3 . Verwenden Sie das intl-Objekt

Nach dem zweiten Schritt der Injektion erhalten wir nun ein intl-Objekt in den Requisiten der Komponente. Die von ihm bereitgestellten Methoden entsprechen im Wesentlichen den oben vorgestellten Komponenten Um die Zeichenfolge anzuzeigen, können Sie die formatMessage-Methode verwenden:

Der erste Parameter von formatMessage kann in Id übergeben werden, und der zweite Parameter wird übergeben in Werten, detailliertere Informationen finden Sie in der API

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

Verwandte Empfehlungen:

PHP – Automatische Umschaltung mehrerer Sprachen implementieren

ASP.NET Core Detaillierte grafische und textliche Erläuterung der Mehrsprachenunterstützung

Detaillierte Einführung in die Mehrsprachenunterstützung in ASP.NET Core

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung mehrsprachiger Beispiele der React-intl-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!