标签: babel-plugin-react-intl

我正在尝试使用语言翻译react-intl.当我使用它时<FormattedMessage id='importantNews' />,它是完美的.但是,当我使用以下代码时intl.formatMessage(),它不起作用并抛出一些错误.我不知道它有什么问题.

import { injectIntl, FormattedMessage } from 'react-intl';

function HelloWorld(props) {
  const { intl } = props;
  const x = intl.formatMessage('hello') + ' ' + intl.formatMessage('world'); //not working
  const y = <FormattedMessage id='hello' />; //working
  return (
    <button>{x}</button>
  );
}

export default injectIntl(HelloWorld);

我的根组件是这样的,

import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import taLocaleData from 'react-intl/locale-data/ta';

import HelloWorld from './hello-world';

addLocaleData([
  ...enLocaleData,
  ...taLocaleData
]);

const …

我有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: …

这是我配置客户端通过react-intl呈现正确语言的方式.

import localeData from './translations/en.json';
//import localeData from './translations/xx.json';  <-- any language

const render = routes => {
  match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
      <HotEnabler>
        <IntlProvider locale={locale} messages={localeData}>
          <Provider store={store} app={app} restApp={restApp} key="provider">
            <Router {...renderProps} render={renderRouter} history={history}>
              {routes}
            </Router>
          </Provider>
        </IntlProvider>
      </HotEnabler>,
      dest
    );
  });
};

render(getRoutes(store));

但是我想根据cookie中的语言环境动态导入localeData.因此,如果我的用户的语言环境是"en",我将只加载en.json文件.

const locale = Cookie.get('locale') || 'en';

const render = routes => {
  match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
      <HotEnabler>
        <IntlProvider locale={locale} messages={localeData}>
          <Provider store={store} …

我使用React-intl来实现UI Util Library的国际化.该库有一个文件夹,例如i18n,其中我为不同的语言环境放置json文件.如果该库的用户想要添加对其他语言环境的支持,他/她可以为相应的语言环境添加具有键/值对的附加json文件.

但是React-intl需要在之前的各个语言环境中导入和addLocaleData.例如,

import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);

有没有办法添加LocalData并在React-intl中动态导入相应语言环境的语言环境库？

我一直在努力学习和理解react-intl图书馆，我遇到了babel-plugin-react-intl图书馆。图书馆的页面上有这样的描述；

Extracts string messages for translation from modules that use React Intl.

我想知道会提取哪些字符串消息？

另外，提取的消息有什么好处？