用于非组件的React-intl

Question

当前，我有以下代码将react-intl暴露给非组件，但是它为intl引发了未定义错误。

我创建了一个单独的组件，称为“ CurrentLocale”，并向其注入了int-intl。导出函数t将使用CurrentLocale上下文中的intl formatMessage。

import React from 'react';
import {injectIntl} from 'react-intl';
import PropTypes from 'prop-types';
import { flow } from 'lodash';

class CurrentLocale extends React.Component {


    constructor(props,context){

        super();
        console.log(context,props);
        console.log(this.formatMessage);
        const { intl } = this.context.intl;//this.props;

        this.formatMessage = intl.formatMessage;
    }

    render() {
        return false;
    }
}
CurrentLocale.contextTypes={
    intl:PropTypes.object,
};


injectIntl(CurrentLocale);

function intl() {
    return new CurrentLocale();
}

function formatMessage(...args) {
    return intl().formatMessage(...args);
}


const t = opts => {
    const id = opts.id;
    const type = opts.type;
    const values = opts.values;
    let t;

    switch (type){

        case 'message':
        default:
            t = formatMessage(id, values);
    }

    return t;
}

export default t;

t在另一个普通的javascript文件中称为，

import t from './locale/t';
t( { type: 'message', id:'button.Next'});

以下是错误消息。 提前致谢。

Answer 1

有一种新方法可以很容易地使用createIntl，它返回一个可以在 React 组件外部使用的对象。这是文档中的一个示例。

import {createIntl, createIntlCache, RawIntlProvider} from 'react-intl'

// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache()

const intl = createIntl({
  locale: 'fr-FR',
  messages: {}
}, cache)

// Call imperatively
intl.formatNumber(20)

// Pass it to IntlProvider
<RawIntlProvider value={intl}>{foo}</RawIntlProvider>

我个人将intl对象存储在 Redux 存储中，以便我可以在我的应用程序中的任何地方访问它。

Answer 2

我还使用另一种非常简单的方法来解决类似的问题：提供intl对非组件对象的访问：

import { IntlProvider, addLocaleData } from 'react-intl';
import localeDataDE from 'react-intl/locale-data/de';
import localeDataEN from 'react-intl/locale-data/en';
import { formMessages } from '../../../store/i18n'; // I defined some messages here
import { Locale } from '../../../../utils'; //I set the locale fom here

addLocaleData([...localeDataEN, ...localeDataDE]);
const locale = Locale.setLocale(); //my own methods to retrieve locale
const messages = Locale.setMessages(); //getting messages from the json file.
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

export const SCHEMA = {
  salutation: {
    label: intl.formatMessage(formMessages.salutationLabel),
    errormessages: {
      required: intl.formatMessage(formMessages.salutationError),
    },
  },
  academic_title_code: {
    label: intl.formatMessage(formMessages.academicTitleLabel),
  },
};

它像魅力一样运作！

v3.x的更新

迁移到react-intl 3.x之后

import { createIntl, createIntlCache } from 'react-intl'
import { formMessages } from '../../../store/i18n'; // I defined some messages here
import { Locale } from '../../../../utils'; //I set the locale fom here

const locale = Locale.setLocale(); //my own methods to retrieve locale
const messages = Locale.setMessages(); //getting messages from the json file.
// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache();
const intl = createIntl({ locale, messages }, cache)

export const SCHEMA = {
  salutation: {
    label: intl.formatMessage(formMessages.salutationLabel),
    errormessages: {
      required: intl.formatMessage(formMessages.salutationError),
    },
  },
  academic_title_code: {
    label: intl.formatMessage(formMessages.academicTitleLabel),
  },
};

Answer 3

这一行：const { intl } = this.context.intl;应该是const { intl } = this.context;

这是有人做与您几乎完全相同的事情的参考帖子：https://github.com/yahoo/react-intl/issues/983#issuecomment-342314143

在上面，作者本质上创建了一个导出的单例，而不是像上面那样每次都创建一个新实例。这可能也是您想要考虑的事情。