web-dev-qa-db-fra.com

intl.formatMessage ne fonctionne pas - react-intl

J'essaie de faire une traduction linguistique en utilisant react-intl. Lorsque j'utilise ce <FormattedMessage id='importantNews' />, Cela fonctionne parfaitement. Mais lorsque j'utilise le code suivant avec intl.formatMessage(), il ne fonctionne pas et génère des erreurs. Je ne sais pas ce qui ne va pas.

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

function HelloWorld(props) {
  const { intl } = props;
  const x = intl.formatMessage('hello') + ' ' + intl.formatMessage('world'); //not working
  const y = <FormattedMessage id='hello' />; //working
  return (
    <button>{x}</button>
  );
}

export default injectIntl(HelloWorld);

Mon composant racine est comme ça,

import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import taLocaleData from 'react-intl/locale-data/ta';

import HelloWorld from './hello-world';

addLocaleData([
  ...enLocaleData,
  ...taLocaleData
]);

const messages = {
  en: {
    hello: 'Hello',
    world: 'World'
  },
  ta: {
    hello: 'வணக்கம்',
    world: 'உலகம்'
  }
};

ReactDOM.render(
  <IntlProvider key={'en'} locale={'en'} messages={messages['en']}>
    <HelloWorld />
  </IntlProvider>,
  document.getElementById('root')
);

Quelqu'un peut-il m'aider à résoudre ce problème? Merci d'avance.

reactjsreduxreact-reduxreact-intlbabel-plugin-react-intl
10
Abraham Gnanasingh

Vous devez appeler formatMessage avec MessageDescriptor , pas seulement id:

const x = intl.formatMessage({id: 'hello'}) + ' ' + intl.formatMessage({id: 'world'});

Pour mieux s'en souvenir - le composant est appelé avec prop id:

<FormatMessage id="Hello" />

Les accessoires sont en fait un dictionnaire de valeurs-clés:

// this is the same as above
<FormatMessage {...{id: 'hello'}} />

Maintenant, la fonction formatMessage accepte les mêmes accessoires que le composant FormatMessage:

formatMessage({id: 'hello'})
11
Tomáš Ehrlich