Question

在我的应用程序中，我正在使用react-alert-template-basic显示警报。在API中，我直接编写文本，例如： this.props.alert.error('<some text>');

现在，我想输入文字。快速搜索后，我发现react-intl是最受欢迎的选择之一。在文档中，我发现如果在渲染时执行国际化，就像这样：

  <FormattedMessage
                id="welcome"
                defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                  one {message}
                  other {messages}
                }`}
                values={{name: <b>{name}</b>, unreadCount}}
            />

我不知道如何将react-intl与react-alert-basic-template一起使用。后者直接需要字符串，而不是组件FormattedMessage。

有人知道怎么做吗？如果没有，还有其他选择吗？

Answer 1

使用formatMessage函数代替<FormattedMessage>组件。您还将需要injectIntl HOC：

import React from 'react';
import {injectIntl, FormattedRelative} from 'react-intl';

const Component = ({intl}) => {
  this.props.alert.error(intl.formatMessage(...))

  // your component ...
}


export default injectIntl(Component);

此外，如果您处于项目的开始（我是作者），则可以考虑使用lingui i18n库。它是React-intl的后继者，用法非常相似。有一个react tutorial，此示例如下所示：

import React from "react"
import { withI18n } from "@lingui/react"

const Component = ({ i18n }) => {
  this.props.alert.error(i18n.t`some text`)

  // your component ...
}

export default withI18n(Component)

I18n在React-Alert-Template-Basic中

1 个答案: