Beispiele zur Erläuterung der React-intl-Implementierung der Mehrsprachigkeit

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.

Die Sprachinternationalisierungsfunktion wurde kürzlich zum Projekt hinzugefügt.

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 435025415896d9140df5627cdc6a7b20

Diese Komponente wird verwendet, um den Kontext von i18n festzulegen. Dadurch wird die Stammkomponente der Anwendung umschlossen Die gesamte Anwendung wird im Kontext von i18n konfiguriert. Die beiden wichtigsten 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 die aktuelle Sprachumgebung Chinesisch ist, wird „Hallo“ angezeigt. Wenn es sich um eine englische Umgebung handelt, wird „Hallo“ angezeigt.

Dynamischer Wert

<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 Werte dynamisch übertragen können Werte in FormattedMessage wird ein JSON-Objekt übergeben, das unseren Inhalt dynamisch anzeigt.

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. Die Injektion sollte wie oben sein. Wenn Sie Redux nicht verwenden, müssen Sie nur die Standard-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 dieses Mal Wenn wir eine Zeichenfolge anzeigen möchten, können wir die formatMessage-Methode verwenden:

Der erste Parameter von formatMessage kann übergeben werden Die ID und der zweite Parameter können übergeben werden. Parameter werden in Werten übergeben. Weitere Informationen finden Sie in der API

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

Verwandte Empfehlungen:

Erkunden Sie das Interne Mechanismus von React

Welche Möglichkeiten gibt es, Komponenten in React zu schreiben

Wissen über das React-Ereignissystem

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