我正在尝试使用 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
与 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
组件相同的 props:
formatMessage({id: 'hello'})
关于reactjs - intl.formatMessage 不起作用-react-intl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44832683/