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

Question

我想本地化我的组件。我使用 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 来做到这一点。 提前致谢。

Answer 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 即可。