reactjs – 如何使用defineMessages方法定义本地化？

发布时间：2020-12-15 16:18:00 所属栏目：百科来源：网络整理

导读：我想本地化我的组件.我使用yahoo / react-intl lib.我定义了一些消息 const messages = defineMessages({ greeting: { id: 'app.home.greeting',description: 'Message to greet the user.',defaultMessage: 'Hello!' },}); 我不知道如何为消息定义可本地化

我想本地化我的组件.我使用yahoo / react-intl lib.我定义了一些消息

const messages = defineMessages({
    greeting: {
        id: 'app.home.greeting',description: 'Message to greet the user.',defaultMessage: 'Hello!'
    },});

我不知道如何为消息定义可本地化的文本,所以我得到了这个错误

app.js:27785[React Intl] Missing message: "app.home.greeting" for locale: "nl",using default message as fallback.

使用示例

<input type="text" {...firstName} placeholder={intl.formatMessage(messages.greeting)} />

有谁知道如何定义本地化的消息？
使用defineMessages看起来不可能这样做.
提前致谢.

解决方法

defineMessages旨在与 babel-plugin of react-intl一起使用.

实际上,它只是在提取代码中某处定义的消息时帮助您.这在大型代码库中非常有用,可以使消息ID和翻译保持同步.

但是,无论您是否使用defineMessages,您仍然需要提供如下翻译：

const translations = {
    'en-US': {
        'app.home.greeting': 'Hello!','app.home.color.description': 'Please choose a color',},'en-GB': {
        'app.home.greeting': 'Hello!','app.home.color.description': 'Please choose a colour',de: {
        'app.home.greeting': 'Hallo!','app.home.color.description': 'Bitte eine Farbe ausw?hlen',}
 }

<IntlProvider locale=”en” messages={translations.en}>
    <FormattedMessage
        id='app.home.color.description'
        description='A task description to choose a color'
        defaultMessage='Please choose a color'
    /> 
    <input type="text" {...firstName} placeholder={intl.formatMessage(messages.greeting)} />
</IntlProvider>

当然,您不需要将所有内容都包装在IntlProvider中.只需在顶级/应用程序组件周围添加一个IntlProvider即可.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!