私は同じ問題に直面している、これは私が見つけたものです:
私は解決策は基本的に接続する機能をReduxStoreするIntlProviderを結合さhereを、提供に使用される言語を変更するには。また、言語の変更時にコンポーネントを再レンダリングするためにキーを含めることを忘れないでください。 、これはConnectedIntlProvider.jsある
ちょうどあなたのエントリ・ポイント・ファイル内の
import { connect } from 'react-redux';
import { IntlProvider } from 'react-intl';
// This function will map the current redux state to the props for the component that it is "connected" to.
// When the state of the redux store changes, this function will be called, if the props that come out of
// this function are different, then the component that is wrapped is re-rendered.
function mapStateToProps(state) {
const { lang, messages } = state.locales;
return { locale: lang, key: lang, messages };
}
export default connect(mapStateToProps)(IntlProvider);
そして(githubの上の元のコメントに欠けている重要な小道具に気づく)デフォルトIntlProviderをバインドします。これは基本的にすべてのコードです:
次に、ロケールを管理するための縮小機能を実装し、必要に応じて言語を変更するアクションクリエイターを作成するだけです。
翻訳を保存するための最良の方法として、このトピックに関する多くのディスカッションがあり、状況はかなり混乱しているようですが、正直言って私は反応型の作成者が日付と数値フォーマットに焦点を当て、翻訳。だから、私はそれを処理するための絶対に正しい方法を知らないが、これは私が何をするのですか:
"locales"フォルダを作成し、 "en.js"、 "fi.js" "ru.js"など。基本的にはすべての言語で作業します。このような翻訳を持つすべてのファイルのエクスポートJSONオブジェクトで
:
export const ENGLISH_STATE = {
lang: 'en',
messages: {
'app.header.title': 'Awesome site',
'app.header.subtitle': 'check it out',
'app.header.about': 'About',
'app.header.services': 'services',
'app.header.shipping': 'Shipping & Payment',
}
}
他のファイルはまったく同じ構造を持っていますが、内部に翻訳された文字列を持ちます。
次に、言語の変更を担当するレデューサーで、これらのファイルからすべての状態をインポートし、言語を変更するアクションが送出されるとすぐにreduxストアにロードします。前の手順で作成したコンポーネントがIntlProviderに変更を伝播し、新しいロケールが実行されます。 <FormattedMessage>
またはintl.formatMessage({id: 'app.header.title'})}
を使ってページに出力してください。詳しくはgithub wikiをご覧ください。
彼らにはいくつかのDefineMessages機能がありますが、正直なところ、使い方を知ることができませんでした。基本的に忘れてOKです。
mobxではhttps://github.com/Sqooba/mobx-react-intlを使用できます –