web-dev-qa-db-ja.com

非コンポーネントのReact-intl

現在、react-intlを非コンポーネントに公開する次のコードがありますが、intlに対して未定義のエラーがスローされます。

'CurrentLocale'として別のコンポーネントを作成し、それにinject-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'});

エラーメッセージは次のとおりです。 enter image description here よろしくお願いします。

reactjsreact-intl
9
Kanishka

この行：const { intl } = this.context.intl;はconst { intl } = this.context;

これは、あなたとまったく同じことをしている誰かの参照投稿です： https://github.com/yahoo/react-intl/issues/983#issuecomment-34231414

上記では、作成者は、上記のように毎回新しいインスタンスを作成する代わりに、本質的にエクスポートされるシングルトンを作成しています。これも検討したいことかもしれません。

2
mrjman

同様の問題を解決するために使用した非常にシンプルな別のアプローチもあります。非コンポーネントに対して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),
  },
};

それは魅力のように働いています！

5
Periback

非コンポーネントに対してreact-intl formatMessageを使用する場合と同様の問題を解決する別の方法もあります。

LocaleStore.jsストアファイルを作成します。

 import _formatMessage from "format-message";

    export default class LocaleStore {

      formatMessage = (id, values) => {
        if (!(id in this.messages)) {
          console.warn("Id not found in intl list: " + id);
          return id;
        }
        return _formatMessage(this.messages[id], values);
      };
    }

localeStoreをインポートCombinedStores.js

import LocaleStore from "./stores/LocaleStore";
import en from "./translations/en";
import de from "./translations/de";
import Global from "./stores/global"
const locale = new LocaleStore("en", {
  en,
  de
});
export default {
global:new Global(locale) 
}

これをGlobalStore.jsで使用できます

    class GlobalStore {
    constructor(locale) {
     this.locale = locale;
    }

   formatMessage=(message_is,formatLanguage="en")=> {
     return  this.locale.formatMessage(message_id, formatLanguage);
    }
  }
1
durga patra

createIntlを使用してこれをかなり簡単に行う新しい方法があります。これは、Reactコンポーネントの外部で使用できるオブジェクトを返します。以下に documentation の例を示します。 =。

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ストアに保存して、アプリのどこからでもアクセスできるようにしています。

0
Valentin Duboscq