web-dev-qa-db-ja.com

intl.formatMessageが機能しない-react-intl

_react-intl_を使用して言語を翻訳しようとしています。これを_<FormattedMessage id='importantNews' />_を使用すると、完璧に機能します。しかし、次のコードをintl.formatMessage()で使用すると、機能せず、いくつかのエラーがスローされます。何が悪いのかわかりません。

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

私のルートコンポーネントはこのようなものです、

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

誰かがこの問題を解決するのを手伝ってくれる？前もって感謝します。

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

formatMessage で MessageDescriptor を呼び出す必要があります。idだけではありません。

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

これをよりよく覚えるために-コンポーネントはprop idで呼び出されます：

<FormatMessage id="Hello" />

小道具は、実際にはキーと値の辞書です。

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

現在、formatMessage関数はFormatMessageコンポーネントと同じプロパティを受け入れます。

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