React の国際化 react-intl の使用

npx 作成-React-アプリ react-intl-デモ  
npm i react-intl -S

React をインポートし、{useContext} を 'react' から取得します。
import { IntlProvider } from 'react-intl' // react-redux の Provider と同様に、言語の国際化が必要なコンポーネントの最外層にラップされ、コンポーネントとコンポーネント内のサブコンポーネントが react-intlim によって提供される API とメソッドを使用できるようにします。port { mainContext } from '../reducer' // ここでは、useReducer を使用して、ルート ディレクトリに 1 つ作成し、言語のグローバル状態管理を制御します。import zh_CN from './cn' // 中国語パッケージimport en_US from './en' // 英語パッケージconst Inter = (props) => {
    // デフォルトの言語設定を取得します。また、これを、react 自体が提供する redux Mobx や useReducer などのグローバル状態管理と組み合わせて使用​​することもできます。const { state } = useContext(mainContext)
  const chooseLocale = (val) => { 
    _val = val || navigator.language.split('_')[0] とします
    スイッチ (_val) {
      'en'の場合:
        戻る en_US
      ケース 'zh':
        zh_CNを返す
      デフォルト：
        zh_CNを返す
    }
  }
  let locale = state.locale // ロケールを取得する
  {children} = propsとします
  // サブコンポーネントをラップして react-intl の API を共有し、多言語対応を実現します (
    <IntlProvider
      キー={ロケール}
      ロケール={ロケール}
      デフォルトロケール='zh'
      メッセージ={chooseLocale(ロケール)}
    >
      {子供たち}
    </IntlProvider>
  ）
}

エクスポートデフォルトインター

定数zh_CN = {
    開始: '開始'、
    スイッチ: 'スイッチ'
  }
  エクスポートデフォルト zh_CN
  

定数 en_US = {
    開始: '開始'、
    スイッチ: 'スイッチ'
  }
  エクスポート デフォルト en_US
  

Reactをインポートし、{useReducer}を'react'からインポートします。
定数CHANGE_LOCALE = 'CHANGE_LOCALE'

const mainContext = React.createContext()

const リデューサー = (状態、アクション) => {
  スイッチ（アクションタイプ）{
    CHANGE_LOCALEの場合:
      戻り値 { ...状態、ロケール: action.locale || 'zh' }
    デフォルト：
      状態を返す
  }
}

const ContextProvider = (props) => {
  const [状態, ディスパッチ] = useReducer(reducer, {
    ロケール: 'zh'
  })
  戻る （
    <mainContext.Provider 値 = {{ state, dispatch }}>
      {props.children}
    </mainContext.Provider>
  ）
}

エクスポート { リデューサー、メインコンテキスト、コンテキストプロバイダー }

'./App.css' をインポートします。
'./reducer' から {ContextProvider} をインポートします。
'./locale/intl' から Inter をインポートします
'./views' から View をインポートします

関数App() {
  戻る （
    <コンテキストプロバイダー>
      <インター>
        <表示 />
      </インター>
    </コンテキストプロバイダー>
  );
}
デフォルトのアプリをエクスポートします。

react をインポートし、{useContext} を 'react' から取得します。
'../reducer' から { mainContext } をインポートします。
'react-intl' から { FormattedMessage } をインポートします。
 
関数インデックス() {
    const { ディスパッチ、状態 } = useContext(mainContext)
    const { ロケール } = 状態
    const changeLang = () => { // 状態の言語を変更して切り替えます。dispatch({
            タイプ: 'CHANGE_LOCALE'、
            ロケール: ロケール === 'zh' ? 'en' : 'zh'
        })
    }
    戻る （
        <div>
           <div>
            <フォーマットされたメッセージ id="開始" ></フォーマットされたメッセージ>
           </div>
           <div>
                <button onClick={changeLang} > <FormattedMessage id="switch" ></FormattedMessage></button>
           </div>
        </div>
    );
}
デフォルトのインデックスをエクスポートします。