React-Intl Comment utiliser FormattedMessage dans un paramètre fictif d'entrée

Question

Je ne sais pas comment obtenir les valeurs de

 <FormattedMessage {...messages.placeholderIntlText} />
 

dans un format d'espace réservé comme entrée:

 <input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />
 

comme il retournerait [Object object] dans l'espace réservé actuel. Existe-t-il un moyen d'obtenir la valeur correcte exacte?

Answer 1

L' <Formatted... /> Réagir composantes en react-intl sont destinés à être utilisés dans le rendu des scénarios et ne sont pas destinés à être utilisés dans des espaces réservés, le texte de remplacement, etc. Ils ont rendu HTML, pas de texte brut, ce qui n'est pas utile dans votre scénario.

Au lieu de cela, react-intl fournit un niveau inférieur de l'API pour exactement la même raison. Le rendu des composants eux-mêmes utiliser cette API sous le capot pour formater les valeurs dans le code HTML. Votre scénario probablement vous oblige à utiliser le niveau inférieur formatMessage(...) API.

Vous devez injecter l' intl votre objet dans votre composant à l'aide de l' injectIntl HOC et puis il suffit de formater le message par le biais de l'API.

Exemple:

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

const ChildComponent = ({ intl }) => {
  const placeholder = intl.formatMessage({id: 'messageId'});
  return(
     <input placeholder={placeholder} />
  );
}

ChildComponent.propTypes = {
  intl: intlShape.isRequired
}

export default injectIntl(ChildComponent);

Veuillez noter que je suis en utilisant certains ES6 fonctionnalités, afin de s'adapter en fonction de votre configuration.

Answer 2

• Vous pouvez utiliser intl prop de injectIntl HoC
• Vous pouvez également fournir une fonction en tant que composant enfant:

<FormattedMessage {...messages.placeholderIntlText}> {(msg) => (<input placeholder={msg} />)} </FormattedMessage>

Answer 3

Pour l'espace réservé d'entrée pour plus de détails

    <FormattedMessage id="yourid" defaultMessage="search">
    {placeholder=>  
        <Input placeholder={placeholder}/>
        }
    </FormattedMessage>
 

Answer 4

Basé sur les réagissent intl wiki la mise en œuvre d'une zone de saisie avec traduisible espace réservé ressemblera à:

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

const messages = defineMessages({
  placeholder: {
    id: 'myPlaceholderText',
    defaultMessage: '{text} and static text',
  },
});

const ComponentWithInput = ({ intl, placeholderText }) => {
  return (
    <input
      placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
    />
  );
};

ComponentWithInput.propTypes = {
  intl: intlShape.isRequired
};

export default injectIntl(ComponentWithInput);

et l'utilisation de celui-ci:

import ComponentWithInput from './component-with-input';
...
render() {
  <ComponentWithInput placeholderText="foo" />
}
...

L' id: 'myPlaceholderText', partie est nécessaire pour permettre à l' babel-plugin-réagir-intl recueillir les messages pour la traduction.

Answer 5

Vous essayez de rendre un composant React nommé FormattedMessage dans une balise fictive qui attend une chaîne.

Vous devriez plutôt créer une fonction nommée FormattedMessage qui renvoie une chaîne dans l'espace réservé.

 function FormattedMessage(props) {
    ...
}

<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />