intl.formatMessage 不工作 - react-intl
intl.formatMessage not working - 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')
);
有人可以帮我解决这个问题吗?提前致谢。
您需要致电 formatMessage
with 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'})
此外,您似乎缺少它的默认值。
<FormattedMessage id="footer.table_no" defaultMessage="Hello" />
在尝试使用动态值失败后,我发现如果 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 起作用。
我正在尝试使用 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')
);
有人可以帮我解决这个问题吗?提前致谢。
您需要致电 formatMessage
with 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'})
此外,您似乎缺少它的默认值。
<FormattedMessage id="footer.table_no" defaultMessage="Hello" />
在尝试使用动态值失败后,我发现如果 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 起作用。