Reactjs intl.formatMessage不工作-反应intl

我正在尝试使用

react intl

进行语言翻译。当我使用这个

时，它工作得非常好。但是当我将以下代码与

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

从'react intl'导入{injectIntl，FormattedMessage}；
函数HelloWorld（道具）{
常量{intl}=props；
const x=intl.formatMessage（'hello'）+''+intl.formatMessage（'world'）；//不工作
常数y=；//正在工作
返回(
{x}
);
}
导出默认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')
);

从“react dom”导入ReactDOM；
从'react intl'导入{addLocaleData，IntlProvider}；
从“react intl/locale data/en”导入enLocaleData；
从“react intl/locale data/ta”导入taLocaleData；
从“/hello world”导入HelloWorld；
addLocaleData([
…enLocaleData，
…塔洛卡莱达
]);
常量消息={
嗯:{
你好：'你好'，
世界：“世界”
},
助教：{
你好：'வணக்கம்',
世界：'உலகம்'
}
};
ReactDOM.render(
,
document.getElementById（'root'））
);

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

您需要打电话，而不仅仅是

id

：

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

<FormatMessage id="Hello" />

---

为了更好地记住这一点，使用prop

id

调用组件：

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

<FormatMessage id="Hello" />

---

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

 <FormattedMessage id="footer.table_no" defaultMessage="Hello" />

---

尝试使用动态值失败后，我发现如果

const intlKey=“something”

//这不起作用
//这很有效

---

因此，字符串化您的值（即使确定它是字符串）以使intl正常工作。

检查是否正确传递了道具。我希望我正确传递了道具。你能告诉我你在说什么道具吗？国际道具。你能解释一下你犯了什么错误吗？我不知道什么是intl道具。但是我收到了这个错误

未捕获错误：[React Intl]必须提供一个“id”来格式化消息。

你是Tamizan吗。我是Tamizan。我不知道。我会参考和分享我的知识。托马斯，你的解决方案确实奏效了。我确实把昨天的代码放在了另一个文件中，今天它也给我带来了错误。很抱歉。你的解释更清楚。谢谢！随着时间的推移，我将删除我以前的评论。

{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