問題タブ [react-intl]

過去 2 か月分のコードがあり、数日前まではすべて正常に機能していました。すべてのモジュールを削除し、npm を再度インストールしました。ドロップダウンで言語を変更すると、react-intl がエラーをスローし始めました。私の App.js には、次のようなものがあります。

私の言語コンポーネントでは、ドロップダウンの変更時にロケールを変更しています。lc をログに記録し、正しい lc が返され、翻訳されたメッセージを含む配列を取得する前にメッセージをコンソールに送信すると、img で確認できるように、エラーがスローされます。

私がプロジェクトで使用したバージョンは「2.0.0-beta-2」ですが、バージョン番号を変更せずにアップデートされたようです。

何が起こったのか知っている人はいますか？ありがとう

ルートが変更されたときに、ページの翻訳を動的にロードします。ルートごとに onEnter を使用して実行しました。

これを実装するより良い方法はありますか？ルートごとに onEnter コールバック関数を使用しないようにすることはできますか?

react-intl を使用して React アプリで i18n をセットアップしようとしています。アプリはユニバーサル レンダリングされます (つまり、ノードを使用するクライアントとサーバーの両方で)。私が持っているものの基本的な例はこれです：

サーバーでレンダリングされたフォーマットされた日付は、クライアントでレンダリングされた日付とは異なり、反応チェックサムが無効になり、サーバーのレンダリングが破棄されます。サーバーは日付の en-US ロケールを送り返し、ブラウザは en-GB をレンダリングしています

サーバーとブラウザーの両方でこの小さなテストを試しました。

ブラウザでは、次のように記録されます。

"2016/13/04" "2016/4/13"

これは私が期待するものですが、ノードで取得します

"2016/4/13" "2016/4/13"

サーバーでレンダリングされた反応コードのバージョンがブラウザのバージョンと異なるのはなぜでしょうか??

私はちょうどこれが問題だと推測しています。ノードはバージョン v5.4.1 です

ライブラリのコンポーネントを使用しようとしていますFormattedNumberが、react-intl動作させることができません。

これは、スパンでラップされた、コンポーネントに渡した方法で値を返すだけですが、数値をフォーマットしません。

コンソールに次のエラーが表示されます。

[React Intl] 番号のフォーマット中にエラーが発生しました。TypeError: 関数でバインドを呼び出す必要があります

コンポーネントはすべてのFormattedMessage翻訳で正常に動作し、ロケールは に設定されてen-USいるため、問題が やその他の原因によるものではないと思いIntlProviderます。

私は最新バージョンのライブラリを使用していますが、2.0.1

何か案が？

アプリケーションで複数の言語をサポートしており、これには React-intl を使用しています。サーバーを呼び出す Redux ミドルウェアがあり、エラーが発生した場合は UI にエラーを表示したいと考えています。

私は次のようなことができることを知っています:

1) メッセージ キーを使用してミドルウェアからアクションをディスパッチします。

2）私のReactコンポーネントの使用で：

しかし、ミドルウェアから既に翻訳されたメッセージでアクションをディスパッチする方法はありますか?

提案のために react-intl を調べましたが、酵素の明示的なドキュメントは残っていません。

これが、私がテストを書こうとしてきた方法です。

しかし、私はエラーが発生し続けます

不変違反: [React Intl] 必要なintlオブジェクトが見つかりませんでした。コンポーネントの祖先に存在する必要があります。

彼らのレポを調べたところ、「react-addons-test-utils」で動作するようになったようです。

私は何か間違ったことをしていますか？

編集：解決しました！答えは下にスクロール

react-intlコンポーネント テストでは、コンテキストにアクセスできるようにする必要があります。問題は、親ラッパーmount()なしで (Enzyme の) 単一コンポーネントをマウントしていることです。<IntlProvider />これは、プロバイダーをラップすることで解決されますが、 は ではなくインスタンスをroot指します。IntlProviderCustomComponent

The Testing with React-Intl: Enzymeドキュメントはまだ空です。

<カスタム コンポーネント />

標準テストケース (望ましい) (酵素 + モカ + チャイ)

ただし、コンポーネントはライブラリFormattedMessageの一部として使用react-intlするため、上記のコードを実行すると次のエラーが発生します。

Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

で包むIntlProvider

これにより、必要なコンテキストが提供CustomComponentさintlれます。ただし、次のようなテスト アサーションを実行しようとすると、次のようになります。

次の例外が発生します。

AssertionError: expected undefined to equal ''

IntlProviderこれはもちろん、私たちの ではなくの状態を読み取ろうとするためCustomComponentです。

アクセスの試みCustomComponent

以下を試してみましたが、役に立ちませんでした：

問題は、「ルート」操作を実行しながら、コンテキストを使用してマウントするにはどうすればよいかCustomComponentintlCustomComponentということです。