intl.formatMessage funktioniert nicht - react-intl

Question

Ich versuche, die Übersetzung der Sprache mit react-intl zu tun. Wenn ich dieses <FormattedMessage id='importantNews' /> benutze, funktioniert es perfekt. Aber wenn ich den folgenden Code mit intl.formatMessage() verwende, funktioniert es nicht und wirft einige Fehler. Ich weiß nicht, was daran falsch ist.

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); 

Meine Wurzelkomponente so ist,

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') 
); 

Kann jemand mir helfen, dieses Problem zu lösen? Danke im Voraus.

Answer 1

Sie müssen formatMessage mit MessageDescriptor nennen, nicht nur id:

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

---

Um dies besser erinnern - Komponente mit prop id genannt wird:

<FormatMessage id="Hello" /> 

Requisiten sind in der Tat ein Schlüsselwertwörterbuch:

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

Nun nimmt formatMessage Funktion die gleichen Requisiten wie FormatMessage Komponente:

formatMessage({id: 'hello'})