在轨道上做出反应/反应国际

时间:2017-12-27 14:26:51

标签: ruby-on-rails reactjs react-intl react-on-rails

我正在尝试按照本指南为rails / react_on_rails项目实施i18n; https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md

我收到错误“formatMessage未定义”,所以我可能遗漏了一些东西,这是我的代码:

import PropTypes from 'prop-types';
import React from 'react';
import { IntlProvider } from 'react-intl';

import { addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import nb from 'react-intl/locale-data/nb';
import { translations } from '../../../libs/i18n/translations';
import { defaultLocale } from '../../../libs/i18n/default';

// Initizalize all locales for react-intl.
addLocaleData([...en, ...nb]);

// set locale and messages for IntlProvider.
// const locale = method_to_get_current_locale() || defaultLocale;
const locale = defaultLocale;
const messages = translations[locale];

import { defaultMessages } from '../../../libs/i18n/default';


export default class TextMessage extends React.Component {

  render() {
    return (
      <IntlProvider locale={locale} key={locale} messages={messages}>   
        { formatMessage(defaultMessages.ActionsYes) }
      </IntlProvider>

    );
  }
}

1 个答案:

答案 0 :(得分:1)

您收到确切的错误消息:

  

formatMessage未定义

我一直在使用react-intl所以我认为你需要做的就是先注入intl个对象。您可以在react-intl文档中阅读相关内容。试试这个:

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

...

class TextMessage extends React.Component {


  render() {

    return (
      <IntlProvider locale={locale} key={locale} messages={messages}>
        { this.props.intl.formatMessage(defaultMessages.ActionsYes) }
      </IntlProvider>

    );
  }
}

export default injectIntl(TextMessage);

我打赌它会奏效。

甚至更简单就改变一下:

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

...

export default class TextMessage extends React.Component {
  render() {
    return (
       <IntlProvider locale={locale} key={locale} messages={messages}>
        <FormattedMessage {...defaultMessages.ActionsYes} />
       </IntlProvider>

    );
  }
}
相关问题