React-intl在React之外定义消息 [英] React-intl define messages outside of react

问题描述

我有utils.js文件.

I have utils.js file.

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 .所以我定义了消息

I would like to translate this texts - [low, medium, high, critical] using https://github.com/yahoo/react-intl. So I defined messages

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函数，但只能在react上下文中使用.

How can I pass the messages back to the function? There should be formatMessage function but it's only in react context.

推荐答案

我认为在您的情况下，您想访问intl对象，但是该文件不是react组件，对吗? 如果是这种情况，则必须在此文件内创建一个提供程序，类似于在index.js文件中可能已有的提供程序.

I think in your case you want to have access to the intl object but this file is not a react component, right? If it is the case, you'd have to create a provider inside this file, something similar to what you probably already have in your index.js file.

在您的utils.js文件中，您需要添加以下内容:

In your utils.js file you'd add this:

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

You can also check this answer: React-intl for non components

这篇关于React-intl在React之外定义消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！