Ich versuche meine Anwendung von React 0.12 nach React 0.14 zu migrieren und habe Probleme mit Optionselementen, die react-intl FormatierteMessage-Objekte, die in ausgewählte Tags eingefügt werden.
Hier ist ein Beispiel JSX-Code:
%Vor%Dieser Code funktioniert in React 0.12 und ich sehe meine übersetzten Optionselemente.
In Reaktion 0.14 habe ich diesen Fehler:
%Vor%Ich habe die Nachricht zu diesem Änderungssatz in React verfolgt, der Anfang des Jahres passiert ist:
Wie kann ich dieses Problem beheben? Ich kann nicht der einzige sein, der versucht, internationalisierte Optionselemente zu verwenden?
Das war schon immer ein Problem. Reagiere & lt; 0.14 verwendet, um eine ungültige DOM-Struktur stillschweigend zu akzeptieren, in Ihrem Fall <span> elements in <option> elements. Der Browser würde dann die DOM-Struktur korrigieren und bewirken, dass das von React verwaltete virtuelle DOM nicht mehr mit der realen Sache übereinstimmt. Sie würden keine Fehler sehen, bis Sie versucht haben, vorhandene Komponenten neu zu rendern, anstatt sie einfach neu zu mounten.
react-intl V2.0.0, das mit der Unterstützung von React 0.14 ausgeliefert wird, ermöglicht es Ihnen, das Funktion-als-Kind-Muster zu verwenden, um die Art und Weise anzupassen, wie Ihre Formatted* -Komponenten rendern. Lesen Sie den Abschnitt "Unterstützung von Funktionen als Kind" auf dieses Problem .
In Ihrem Fall würden Sie tun:
%Vor%Ich glaube nicht, dass es einen Weg gibt, dies auf der aktuellen stabilen Version 1.2.1 zu erreichen.
Ich hatte das gleiche Problem und löste es über die injectIntl ().
Diese Funktion wird verwendet, um eine Komponente zu umbrechen und das von dem IntlProvider erstellte Prop-Objekt als Prop für die umbrochene Komponente einzufügen. Die Verwendung der HOC-Factory-Funktion verringert die Notwendigkeit, dass der Kontext Teil der öffentlichen API ist.
Das heißt, Sie müssen Ihre Komponente nur mit der injectIntl-Funktion wie folgt umschließen:
%Vor%Ich hoffe, das hilft ...
Als eine etwas bessere Alternative zu @Alexandre Kirszenberg Antwort, ist es auch möglich, intl -Objekt in die Komponente zu injizieren und formatMessage function direkt zu verwenden,
Verwenden Sie injectIntl , um die Komponente, in der Sie die API verwenden möchten, zu umbrechen, damit Sie die API verwenden können, z. B. formattedMessage und so weiter. Siehe react-intl / wiki / API
Tags und Links reactjs