Wie zu verwenden FormattedMessage innerhalb eines option-Tags in Reagieren 0.14?

Ich versuche zu migrieren, die meiner Anwendung aus Reagieren 0.12 Reagieren 0,14 und habe Probleme mit der option-Elementen, die reagieren-intl FormattedMessage Objekte platziert wählen Sie tags.

Hier ist ein Beispiel JSX-code:

<select>
<option value="value1"><FormattedMessage message={this.getIntlMessage('key1')}/></option>
<option value="value2"><FormattedMessage message={this.getIntlMessage('key2')}/></option>
</select>

Dieser code funktioniert in Reagieren 0,12 und ich sehe meine übersetzten option-Elemente.

In reagieren 0.14, bekam ich diese Fehlermeldung:

Only strings and numbers are supported as <option> children.

Ich verfolgte die Nachricht an diesen änderungssatz in Reagieren, was früher passiert in diesem Jahr:

https://github.com/facebook/react/pull/3847/files

Wie kann ich dieses Problem lösen? Ich kann nicht die einzige sein, die versuchen, zu verwenden internationalisiert option-Elemente?

InformationsquelleAutor Jason Keirstead | 2015-10-30
  1. 14

    Dieser war schon immer ein Problem. Reagieren < 0.14 verwendet, um schweigend hinnehmen ungültig DOM-Struktur, in Ihrem Fall <span> Elemente innerhalb <option> Elemente. Der browser würde dann korrigieren Sie die DOM-Struktur, und verursachen die virtuellen DOM verwaltet Reagieren synchron mit der realen Sache. Würden Sie nicht die Fehler sehen, bis Sie versucht, re-Rendern vorhandenen Komponenten statt nur re-Montage.

    react-intl V2.0.0, die ausgeliefert wird mit Unterstützung Reagieren 0.14, können Sie die Funktion verwenden-Als-Kind-Muster-Anpassung der Art und Weise Ihrer Formatted* Komponenten machen. Siehe "Funktion-Als-Kind Support" Absatz auf dieses Problem.

    In deinem Fall tun würde:

    <FormattedMessage message={this.getIntlMessage('key1')}>
  {(message) => <option value="value1">{message}</option>}
</FormattedMessage>
<FormattedMessage message={this.getIntlMessage('key2')}>
  {(message) => <option value="value2">{message}</option>}
</FormattedMessage>

    Ich glaube nicht, dass es einen Weg gibt, um dies zu erreichen, die auf die aktuelle stabile version, 1.2.1.

    • Wenn die OP muss nicht formatieren konnte Sie nur tun this.getIntlMessage('key1') im inneren der option? Bisschen ein versehen nicht aussetzen den vollen zugrunde liegenden übersetzungs-Methode imo
    • Du hast Recht, in den OP ' s Fall this.getIntlMessage('key1') zurückkehren würde, die richtige Nachricht. Beachten Sie, dass die V2.0.0 API setzen-übersetzung-Methoden auf den Kontext.
    • Das scheint, wie es funktioniert, solange ich verwende keine Platzhalter.... Ich kann nicht glauben, es gibt keinen sicheren Weg, dies zu tun?
    InformationsquelleAutor Alexandre Kirszenberg
  2. 12

    Ich hatte das gleiche problem und löste es über die injectIntl().

    Diese Funktion wird verwendet, um wickeln Sie eine Komponente aus, und füllt die intl context-Objekt erstellt, indem der IntlProvider als requisite auf den verpackten Komponente. Mit die-HOC-factory-Funktion entfällt die Notwendigkeit für den Zusammenhang zu sein, dass ein Teil der öffentlichen API.

    Das bedeutet, daß alle Sie tun müssen ist, wickeln Sie die Komponente mit der injectIntl Funktion, so:

    import React, {Component, PropTypes} from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';

const messages = defineMessages({
    firstoption: {
        id: 'mycomponent.firstoption',
        defaultMessage: 'Coffee',
    },
    secondoption: {
        id: 'mycomponent.secondoption',
        defaultMessage: 'Tea',
    }
});

class MyComponent extends Component {
    render() {
        const {formatMessage} = this.props.intl;

        return (
          <div>
             <select>
                <option value="value1">{formatMessage(messages.firstoption)}</option>
                <option value="value2">{formatMessage(messages.secondoption)}</option>
             </select>
          </div>
        );
    }
}

MyComponent = {
    intl   : intlShape.isRequired
};

export default injectIntl(MyComponent)

    Hoffe, das hilft...

    • wie wäre es wenn ich die Formatierung auf mehrere Komponenten. Wo kann ich lokal injizieren die intl prop, so dass, wenn der Benutzer die Anrufe für die Formatierung von Nachrichten, die er nicht haben, um zu injizieren, die jedes mal intl
    • Also, wenn Sie verwenden die Komponente, was tun Sie, um die erforderliche intl-Attribut? Ich nahm an, dies wurde behandelt, indem die Einspritzung, aber ich bekomme ein Fehler in meinem editor, in dem die Komponente verwendet wird, die besagt, dass ein erforderliches Attribut intl fehlt. Ist das nur ein editor-Problem?
    • "MyComponent =" sollte wohl "MyComponent.propTypes ="...?
    InformationsquelleAutor Alexander
  3. 2

    Als eine etwas bessere alternative zu @Alexandre Kirszenberg Antwort, es ist auch möglich, zu injizieren intl - Objekt in eine Komponente und verwendet formatMessage - Funktion direkt

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

const AddressForm = ({ intl, street, number, postalCode, city, onChange }) => {
  return (
    <form id="paymentAddress">
      //...
      <fieldset className="form-group">
        <label htmlFor="country"><FormattedMessage { ...messages.country } />:</label>
        <div>
          <select name="country">
            <option value="DE">{intl.formatMessage(messages.de)}</option>
            <option value="UK">{intl.formatMessage(messages.uk)}</option>
            <option value="CH">{intl.formatMessage(messages.ch)}</option>
          </select>
        </div>
      </fieldset>
    </form>
  );
};

AddressForm.propTypes = {
  intl: intlShape.isRequired,
  //...
}
    InformationsquelleAutor Alexander Beletsky
  4. 0

    Verwenden injectIntl zu wickeln Sie die Komponente, die Sie möchten, verwenden Sie die API-innen ,so können Sie die API verwenden, wie formattedMessage und so weiter. Sehen reagieren-intl/wiki/API

    InformationsquelleAutor jialin wang
Schreibe einen Kommentar