13

我正在尝试使用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')
);

有人可以帮我解决这个问题吗？提前致谢。

4

3 回答 3

19

你需要打电话formatMessage，MessageDescriptor而不仅仅是id：

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

为了更好地记住这一点 - 使用 prop 调用组件id：

<FormatMessage id="Hello" />

props 实际上是一个键值字典：

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

现在，formatMessage函数接受与组件相同的道具FormatMessage：

formatMessage({id: 'hello'})
于 2017-06-29T19:49:15.810 回答
1

在尝试使用动态值但失败后，我发现如果const intlKey = "something"

{intl.formatMessage({ id: intlKey })} //this doesn't work
{intl.formatMessage({ id: `${intlKey}` })} //this works

<IntlMessages id={intlKey} /> //this doesn't work
<IntlMessages id={`${intlKey}`} /> //this works

因此将您的值字符串化（即使确定它是一个字符串）以便 intl 工作。

于 2020-09-16T19:27:30.987 回答
0

此外，您似乎缺少它的默认值。

 <FormattedMessage id="footer.table_no" defaultMessage="Hello" />
于 2020-08-18T09:50:50.077 回答