React-intl 在 react 之外定义消息

Posted 2023-02-19

【中文标题】React-intl 在 react 之外定义消息

【英文标题】：React-intl define messages outside of react

【发布时间】：2017-07-13 20:32:09

【问题描述】：

我有 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 函数，但它只在反应上下文中。

【参考方案1】：

你可以直接使用 yahoo intl library 来完成这个任务：https://github.com/yahoo/intl-messageformat

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

【参考方案2】：

我认为在您的情况下，您希望访问 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

【讨论】：

translations 从未使用过

它有点老了，但如果我没记错的话，这个想法是在消息中使用它（你看到评论的地方）。 @banan3'14 但这种感冒已经过时了，使用最新版本有不同的方法:)

【参考方案3】：

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

这是一个对我有用的代码 sn-p：

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