Ich habe eine react-router App und möchte i18n hinzufügen. In react-intl Beispiel root-Komponente, die in IntlProvider eingeschlossen ist:
%Vor%);
Aber es gibt nur ein Gebietsschema. Wie aktualisiere ich die App, um andere Sprachen hinzuzufügen und wie kann man Übersetzungen am besten speichern?
Ich habe das gleiche Problem gesehen und das habe ich herausgefunden:
Um die Sprache zu ändern, habe ich die Lösung verwendet hier , die im Grunde genommen IntlProvider bindet ReduxStore mit Connect-Funktion. Vergessen Sie auch nicht, den Schlüssel für das erneute Rendern von Komponenten beim Sprachwechsel mit einzuschließen. Dies ist im Grunde der gesamte Code:
Dies ist ConnectedIntlProvider.js, bindet nur den Standard-IntlProvider (beachten Sie die Schlüssel-Prop, die im ursprünglichen Kommentar auf github fehlt)
%Vor%Und dann in Ihrer Einstiegspunktdatei:
%Vor%Als Nächstes müssen Sie nur den Reducer für die Verwaltung des Gebietsschemas implementieren und die Ersteller von Aktionen dazu bringen, die Sprachen bei Bedarf zu ändern.
Für die beste Art, Übersetzungen zu speichern - ich fand viele Diskussionen zu diesem Thema und die Situation scheint ziemlich verwirrt zu sein, ehrlich gesagt bin ich ziemlich verblüfft, dass die Macher von react-intl sich so sehr auf Datums- und Zahlenformate konzentrieren und die Übersetzung vergessen . Also, ich weiß nicht die absolut richtige Art, damit umzugehen, aber das ist was ich tue:
Erstellen Sie einen Ordner "locales" und erstellen Sie eine Reihe von Dateien wie "en.js", "fi.js", "ru.js" usw. Grundsätzlich alle Sprachen, mit denen Sie arbeiten.
In jeder Datei exportiere ein json-Objekt mit folgenden Übersetzungen:
Andere Dateien haben exakt dieselbe Struktur, aber mit übersetzten Strings.
Dann im Reduzierer, der für die Sprachänderung verantwortlich ist, importieren Sie alle Zustände aus diesen Dateien und laden Sie sie in den Reduxspeicher, sobald die Aktion zum Ändern der Sprache ausgelöst wird. Ihre im vorherigen Schritt erstellte Komponente wird Änderungen an IntlProvider weitergeben und ein neues Gebietsschema wird stattfinden. Geben Sie es auf der Seite mit <FormattedMessage> oder intl.formatMessage({id: 'app.header.title'})} aus, lesen Sie mehr dazu in ihrem GitHub-Wiki.
Sie haben einige DefineMessages Funktion dort, aber ehrlich gesagt konnte ich keine gute Information finden, wie man es benutzt, im Grunde können Sie es vergessen und in Ordnung sein.
Tags und Links reactjs internationalization react-intl formatjs