问题
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;
}
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',
}
});
And now what is the last step?
How can I pass the messages back to the function? There should be formatMessage
function but it's only in react context.
回答1:
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.
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;
}
You can also check this answer: React-intl for non components
回答2:
You can directly use the yahoo intl library for this task: https://github.com/yahoo/intl-messageformat
Otherwise you can pass the formatMessage
function from your react component to the functions it calls.
来源:https://stackoverflow.com/questions/42414416/react-intl-define-messages-outside-of-react