問題タブ [react-intl]

Babel v6、react-intl v2、および webpack を使用して、ソース コードから JSON ファイルにメッセージを抽出したいと考えています。すべて正常にコンパイルされていますが、何も抽出されていません。react-intl の v2 を適切にメッセージを抽出するにはどうすればよいですか?

オプションがありますmessagesDir：

私はもう試した：

• ここからの新しいファイル.babel.rc: https://github.com/yahoo/babel-plugin-react-intl/issues/23 – おそらくスペルミスの名前.babelrcです。
• 新しいファイル.babelrc:

webpack構成を使用

エラーメッセージとして「index.js: Unknown option: /.babelrc.extra」が表示されます。

extra上記のプロパティを上記の webpack 構成にも追加しようとしました。非常によく似たエラー メッセージが表示されます。

バージョン:

react-intlこの種の使用法に関するドキュメント (私はv2ブランチを使用しています) には何も見つからないため、この問題が発生します。次のユースケースに推奨されるアプローチはありますか?

2 つのコンポーネントがあるTooltipとしSelectます。どちらも同じ i18n 形式の文字列が必要です。次のように言います。

他のコンポーネントで同じメッセージを使用するにはどうすればよいですか? これを使用するだけです：

動作しません (すべきではありません:))。それで、これを行う正しい方法は何ですか？これらの共有メッセージをアプリ内のどこかにグローバルに保持する必要がありますか? 「共有」された intl メッセージのリストをコードとは別に維持するのは煩雑になる可能性があるため、react-intl解決すると主張するまさにそのことです。

次のようなコンポーネントがあるとします。

この例の は実際には、、などprops.cycleの期間であるため、FormattedMessage で渡す前にそのテキストも翻訳する必要があります。翻訳内でこの種の翻訳を行う正しい方法は何ですか?dayweekmonth

私がこれを思い付くことができる最高：

これが唯一の方法ですか？

ファイル内の の node-js パッケージ内に、 、 、 などの値が既に定義されていることがわかりますreact-intl。アプリでlib\locale-data\[lang].jsこれらの文字列に直接アクセス/使用する方法はありますか?dayweekmonth

v2のブランチを使用していreact-intlます。

間違っている場合は修正してください。ReactIntl​​ の FormattedMessage は、span タグでラップされた文字列を返します。ReactIntl​​ 1.2 ではthis.getIntlMessage('key')、文字列部分のみを取得するために使用するオプションがあります。

これが私の質問です: ReactIntl​​ 2.0 に同等のものはありますか? FormattedMessage の Function-As-Child パターンを次のように使用して文字列を取得できることを認識しています。

ただし、コンポーネントの「参照」が台無しになり、それ以上使用してコンポーネントにアクセスできませんthis.refs.mycomponent。

以下react-intlはテストです。

私のreactJSコンポーネントをテストしています。

使っていたのでreact-intl。私はIntlProviderそれをレンダリングするために使用する必要があります。

の状態を設定するにはどうすればよいQuotationですか?

更新: 私は使用します:

手に入れQuotationましsetStateた。

しかし、別のエラーが発生しました:

https://github.com/yahoo/react-intl/issues/332#issuecomment-189394004

反応ルーター アプリがあり、i18n を追加したいと考えています。React -intl の例では、IntlProvider にラップされたルート コンポーネント:

);

ただし、ロケールは 1 つだけです。他の言語を追加するためにアプリを更新する方法と、翻訳を保存する最良の方法は?

IntlProvider次のように、アプリをfrom react-intl v2内にラップしています。

そして、私は自分のreact-formフォームをツリーの下に持っています。すべてが素晴らしいです。

しかし、フォームに入力し始めて、UI の言語を変更することにした場合 (redux ストアを介して mylangとmessagesprops を更新するアクションをリッスンすることによって)、フォームはリセットされています:-/

言語が変更されると、アクションredux-form/INITIALIZEが起動されます。

destroyOnUnmount: falseそして、 に渡しても起こりreduxForm()ます。

制御されていないフォーム フィールドでは発生しませんでした。

何か案が？

私のコード: App.js +登録フォーム

React.js アプリでさまざまな言語をサポートしようとしていますが、 react-intlが適切な候補であることがわかりました。それらはV2 に移行していますが、すべてがどのように連携するかを理解するのに苦労しています。サンプル アプリが複雑すぎて、クライアント/サーバー アーキテクチャが含まれています。サーバーなしで単一のページが必要です。

手順は次のようになります。

• を使用してメッセージを定義react-intlするdefineMessage
• を使用してロケールを追加addLocaleData
• ビルド スクリプトを使用して、フラット化されたメッセージ データを各ロケールのファイルにビルドします。

これらの手順を実行しましたが、メッセージを表示する方法がわかりません。React コンポーネントを でラップしてい<IntlProvider>ます。react-intlV2 github の問題は非常に長く、私は答えを見つけようとしてその問題に取り組んできました。誰でも簡単な実例を提供できますか?