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

Posted 2023-02-19

【中文标题】如何使用 defineMessages 方法定义本地化？

【英文标题】：How to define localization with defineMessages method?

【发布时间】：2016-09-10 01:42:25

【问题描述】：

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

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 似乎无法做到这一点。 提前致谢。

【参考方案1】：

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。

【讨论】：

是的，但实际上我应该为 uk en 翻译定义两条具有不同 id 的消息。我说的对吗？

不，每个字符串都使用一个 id。我已经编辑了我的答案以澄清这一点。

translations.en 中的en 来自哪里？以及如何在全局范围内传递 translations 对象，以便在各种组件上重用它？

@Sag1v 我想应该是translations['en-US']