So nutzen Sie React Intl zur Internationalisierung Ihrer React-Anwendungen

React Intl ist eine beliebte Bibliothek, die eine Reihe von Komponenten und Dienstprogrammen zur Internationalisierung von React-Anwendungen bereitstellt. Unter Internationalisierung, auch i18n genannt, versteht man den Prozess der Anpassung einer Anwendung an verschiedene Sprachen und Kulturen.

Mit ReactIntl ​​können Sie problemlos mehrere Sprachen und Gebietsschemas in Ihrer React-Anwendung unterstützen.

Installieren von React Intl

Um die React Intl-Bibliothek nutzen zu können, müssen Sie sie zunächst installieren. Sie können dies mit tun mehr als ein Paketmanager: npm, Garn oder pnpm.

Um es mit npm zu installieren, führen Sie diesen Befehl in Ihrem Terminal aus:

npm installiere react-intl

Um es mit Garn zu installieren, führen Sie diesen Befehl aus:

Garn hinzufügen React-Intl

So verwenden Sie die React Intl Library

Sobald Sie die React Intl-Bibliothek installiert haben, können Sie deren Komponenten und Funktionen in Ihrer Anwendung verwenden. React Intl hat ähnliche Funktionen wie

JavaScript Intl API.

Zu den wertvollen Komponenten, die die React Intl-Bibliothek bietet, gehören die Formatierte Nachricht Und IntlProvider Komponenten.

Die FormattedMessage-Komponente zeigt übersetzte Zeichenfolgen in Ihrer Anwendung an, während die IntlProvider-Komponente Ihrer Anwendung die Übersetzungen und Formatierungsinformationen bereitstellt.

Sie müssen eine Übersetzungsdatei erstellen, bevor Sie mit der Verwendung der FormattedMessage- und IntlProvider-Komponenten zum Übersetzen Ihrer Anwendung beginnen können. Eine Übersetzungsdatei enthält alle Übersetzungen für Ihre Anwendung. Sie können für jede Sprache und jedes Gebietsschema separate Dateien erstellen oder eine einzige Datei verwenden, um alle Übersetzungen zu enthalten.

Zum Beispiel:

Exportconst messageInFrench = {
 Gruß: „Bonjour {Name}“
}

Exportconst messageInItalian = {
 Gruß: „Buongiorno {Name}“
}

Diese Beispielübersetzungsdatei enthält zwei Übersetzungsobjekte: NachrichtenInFranzösisch Und Nachrichten auf Italienisch. Sie können den Platzhalter ersetzen {Name} im Gruß Zeichenfolge zur Laufzeit mit einem dynamischen Wert.

Um die Übersetzungen in Ihrer Anwendung zu verwenden, müssen Sie die Stammkomponente Ihrer Anwendung mit umschließen IntlProvider Komponente. Die IntlProvider-Komponente benötigt drei Reagieren Sie auf Requisiten: Gebietsschema, defaultLocale, Und Mitteilungen.

Die Locale-Requisite akzeptiert eine Zeichenfolge, die das Gebietsschema des Benutzers angibt, während defaultLocale einen Fallback angibt, wenn das bevorzugte Gebietsschema des Benutzers nicht verfügbar ist. Schließlich akzeptiert die Nachrichten-Requisite ein Übersetzungsobjekt.

Hier ist ein Beispiel, das zeigt, wie Sie IntlProvider verwenden können:

importieren Reagieren aus"reagieren";
importieren ReactDOM aus„react-dom/client“;
importieren App aus„./App“;
importieren {IntProvider} aus„react-intl“;
importieren { messageInFrench } aus"./Übersetzung";
ReactDOM.createRoot(dokumentieren.getElementById("Wurzel")).machen(

„fr“ message={messagesInFrench} defaultLocale=„en“>

 </IntlProvider>
 </React.StrictMode>
);

Dieses Beispiel besteht die fr Gebietsschema, das NachrichtenInFranzösisch Übersetzung und eine Standardeinstellung de Gebietsschema zum IntlProvider Komponente.

Sie können mehr als ein Gebietsschema oder Übersetzungsobjekt übergeben IntlProvider erkennt automatisch die Browsersprache des Benutzers und verwendet die entsprechenden Übersetzungen.

Um übersetzte Zeichenfolgen in Ihrer Anwendung anzuzeigen, verwenden Sie die Formatierte Nachricht Komponente. Der Formatierte Nachricht Komponente dauert eine Ausweis prop, die einer Nachrichten-ID im Nachrichtenobjekt entspricht.

Die Komponente benötigt auch eine defaultMessage Und Werte Stütze. Der defaultMessage prop gibt eine Fallback-Nachricht an, wenn eine Übersetzung für das aktuelle Gebietsschema nicht verfügbar ist, während die Werte prop stellt dynamische Werte für die Platzhalter in Ihren übersetzten Nachrichten bereit.

Zum Beispiel:

importieren Reagieren aus"reagieren";
importieren {FormattedMessage} aus„react-intl“;
FunktionApp() {
zurückkehren (




 id="Gruß"
 defaultMessage=„Guten Morgen {Name}“
 Werte={{ Name: 'John'}}
 />
 </p>
 </div>
 );
}
ExportStandard App;

In diesem Codeblock ist die Ausweis Stütze des Formatierte Nachricht Komponente verwendet die Gruß Schlüssel aus dem NachrichtenInFranzösisch Objekt und das Werte prop ersetzt die {Name} Platzhalter mit dem Wert „John“.

Formatieren von Zahlen mit der FormattedNumber-Komponente

React Intl bietet auch die Formatierte Nummer Komponente, mit der Sie Zahlen basierend auf dem aktuellen Gebietsschema formatieren können. Die Komponente akzeptiert verschiedene Requisiten zum Anpassen der Formatierung, z. B. Stil, Währung sowie minimale und maximale Bruchstellen.

Hier sind einige Beispiele:

importieren Reagieren aus"reagieren";
importieren {FormattedNumber} aus„react-intl“;
FunktionApp() {
zurückkehren (




 Dezimal: <Formatierte NummerWert={123.456}Stil="Dezimal" />
 </p>


 Prozent: <Formatierte NummerWert={123.456}Stil="Prozent" />
 </p>
 </div>
 );
}
ExportStandard App;

In diesem Beispiel wird die verwendet Formatierte Nummer Komponente, die a akzeptiert Wert prop, die die Zahl angibt, die Sie formatieren möchten.

Verwendung der Stil prop können Sie das Erscheinungsbild der formatierten Zahl anpassen. Sie können das einstellen Stil prop zu Dezimal, Prozent, oder Währung.

Wenn Sie das einstellen Stil Stütze zur Währung, die Formatierte Nummer Die Komponente formatiert die Zahl als Währungswert unter Verwendung des in der angegebenen Codes Währung Stütze:

importieren Reagieren aus"reagieren";
importieren {FormattedNumber} aus„react-intl“;
FunktionApp() {
zurückkehren (




 Preis: <Formatierte NummerWert={123.456}Stil="Währung"Währung="US DOLLAR" />
 </p>
 </div>
 );
}
ExportStandard App;

Der Formatierte Nummer Die Komponente formatiert die Zahl im obigen Codeblock mithilfe von Währung Stil und die US Dollar Währungscode.

Sie können Zahlen auch mit einer bestimmten Anzahl von Dezimalstellen formatieren MinimumFractionDigits Und MaximumFractionDigits Requisiten.

Der MinimumFractionDigits prop gibt die Mindestanzahl der anzuzeigenden Bruchstellen an. Im Gegensatz dazu ist die MaximumFractionDigits prop gibt die maximale Anzahl von Bruchstellen an.

Wenn eine Zahl weniger Bruchstellen als angegeben hat MinimumFractionDigits, React Intl füllt es mit Nullen auf. Wenn die Zahl mehr Bruchstellen als angegeben hat MaximumFractionDigits, rundet die Bibliothek die Zahl auf.

Hier ist ein Beispiel, das zeigt, wie Sie diese Requisiten verwenden können:

importieren Reagieren aus"reagieren";
importieren {FormattedNumber} aus„react-intl“;
FunktionApp() {
zurückkehren (




 Wert={123.4567}
 MinimumFractionDigits={2}
 MaximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
ExportStandard App;

Formatieren von Datumsangaben mit der FormattedDate-Komponente

Mit React Intl können Sie Datumsangaben konsistent und leicht lesbar formatieren. Der Formatiertes Datum Die Komponente bietet eine einfache und effektive Möglichkeit, Datumsangaben zu formatieren. Es funktioniert ähnlich wie Datum-Uhrzeit-Bibliotheken, die Datumsangaben formatieren, wie z. B. Moment.js.

Die FormattedDate-Komponente benötigt viele Requisiten, wie z Wert, Tag, Monat, Und Jahr. Die Wert-Requisite akzeptiert das Datum, das Sie formatieren möchten, und die anderen Requisiten konfigurieren seine Formatierung.

Zum Beispiel:

importieren Reagieren aus"reagieren";
importieren { FormattedDate } aus„react-intl“;
FunktionApp() {
const heute = neuDatum();
zurückkehren (




 HeuteDas Datum ist
 value={heute}
 Tag=„numerisch“
 Monat="lang"
 Jahr=„numerisch“
 />
 </p>
 </div>
 );
}
ExportStandard App;

In diesem Beispiel ist die Wert prop verwendet das aktuelle Datum. Auch mit der Tag, Monat, Und Jahr props geben Sie an, dass Jahr, Monat und Tag im Langformat angezeigt werden sollen.

Neben Tag, Monat und Jahr bestimmen auch andere Requisiten die Darstellung des Datums. Hier sind die Requisiten und die Werte, die sie akzeptieren:

• Jahr: „numerisch“, „2-stellig“
• Monat: „numerisch“, „2-stellig“, „schmal“, „kurz“, „lang“
• Tag: „numerisch“, „2-stellig“
• Stunde: „numerisch“, „2-stellig“
• Minute: „numerisch“, „2-stellig“
• zweite: „numerisch“, „2-stellig“
• timeZoneName: "kurz lang"

Sie können auch die verwenden Formatiertes Datum Komponente zum Formatieren und Anzeigen der Zeit:

importieren Reagieren aus"reagieren";
importieren { FormattedDate } aus„react-intl“;
FunktionApp() {
const heute = neuDatum();
zurückkehren (




 Es ist ____ Uhr
 value={heute}
 Stunde=„numerisch“
 Minute=„numerisch“
 Sekunde=„numerisch“
 />
 </p>
 </div>
 );
}
ExportStandard App;

Internationalisieren Sie Ihre Reaktionsanwendungen für ein breiteres Publikum

Sie haben gelernt, wie Sie die React-Intl-Bibliothek in Ihrer React-Anwendung installieren und einrichten. Mit React-intl können Sie die Zahlen, Daten und Währungen Ihrer React-Anwendung ganz einfach formatieren. Mit den Komponenten FormattedMessage, FormattedNumber und FormattedDate können Sie Daten basierend auf dem Gebietsschema des Benutzers formatieren.

React-Entwickler machen häufig Fehler, die schwerwiegende Folgen haben können. Beispielsweise kann der Status nicht ordnungsgemäß aktualisiert werden. Es ist wichtig, sich dieser häufigen Fehler bewusst zu sein und sie frühzeitig zu korrigieren, um kostspielige Probleme zu vermeiden.