Question

我有utils.js文件。

export function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        name = 'low';
        break;
    case constants.RISK_CATEGORY_MEDIUM:
        name = 'medium';
        break;
    case constants.RISK_CATEGORY_HIGH:
        name = 'high';
        break;
    case constants.RISK_CATEGORY_CRITICAL:
        name = 'critical';
        break;
    default:
        console.warn('see: /utils/risk.js', 'categoryIdToCategoryName:', categoryId);
        name = 'unknown';
   }
    return name;
}

我想使用https://github.com/yahoo/react-intl翻译这些文本 - [低，中，高，严重]。所以我定义了消息

const translations = defineMessages({
riskLow: {
    id: 'utils.risk.low',
    defaultMessage: 'low',
},
riskMedium: {
    id: 'utils.risk.medium',
    defaultMessage: 'medium',
},
riskHigh: {
    id: 'utils.risk.high',
    defaultMessage: 'high',
},
riskCritical: {
    id: 'utils.risk.critical',
    defaultMessage: 'critical',
}
});

现在最后一步是什么？

如何将消息传递回函数？应该有formatMessage功能，但它只能在反应环境中使用。

Answer 1

我认为在您的情况下，您希望能够访问intl对象，但此文件不是反应组件，对吧？如果是这种情况，您必须在此文件中创建一个提供程序，类似于您在index.js文件中可能已有的提供程序。

在utils.js文件中添加以下内容：

import { IntlProvider, addLocaleData } from 'react-intl';
import localeDataEN from 'react-intl/locale-data/en';
import { translations } from '../point-to-your-translation-file';

addLocaleData(localeDataEN);
const locale = 'en'
const messages = //read it from your translated json file
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext(); // this is how you get access to the formatMessage function to use i18n for your messages

function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        name = intl.formatMessage(formMessages.riskLow);
        break;
    case constants.RISK_CATEGORY_MEDIUM:
        name = intl.formatMessage(formMessages.riskMedium);
        break;
    case constants.RISK_CATEGORY_HIGH:
        name = intl.formatMessage(formMessages.riskHigh);
        break;
    case constants.RISK_CATEGORY_CRITICAL:
        name = intl.formatMessage(formMessages.riskCritical);
        break;
    default:
        console.warn('see: /utils/risk.js', 'categoryIdToCategoryName:', categoryId);
        name = 'unknown';
   }
    return name;
}

您还可以查看以下答案：React-intl for non components

Answer 2

您可以直接使用yahoo intl库执行此任务：https://github.com/yahoo/intl-messageformat

否则，您可以将反应组件中的formatMessage函数传递给它调用的函数。

Answer 3

现在可以使用CreateIntl API（版本4.6.4 React-intl）

这是一个对我有用的代码段：

import { createIntl, createIntlCache } from 'react-intl';
import English from '../../translations/en-US.json'; //your messages translated with id

const cache = createIntlCache();
const intl = createIntl({ locale: 'en-US', messages: English, }, cache);//locale and message can come from Redux or regular import
const number = intl.formatNumber(2000); //just use imperative way like you would with useIntl() hook or InjectIntl HOC

React-intl定义反应之外的消息

3 个答案: