over 3 years ago

react-i18next 是使用 i18next 所建立的 Higher-order components 和 components

於 package.json 建立及安裝底下套件

"i18next": "3.3.1",
"i18next-browser-languagedetector": "0.3.0",
"i18next-xhr-backend": "0.6.0",
"react-i18next": "^1.6.0",

建立 i18n.js

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';


i18n
  .use(XHR)
  .use(LanguageDetector) // 偵測瀏覽器語系
  .init({
    fallbackLng: 'en', // 未偵測到時的後備語系
    ns: ['common'], // 語系的 loading namespace 如語系檔案名稱 common.js
    defaultNS: 'common', // 預設的 namespace name
    debug: true,
    interpolation: {
      escapeValue: false // not needed for react!!
    },
    backend: {
    // 設定語系檔案的 server 路徑, 會以GET的方式跟 server 要檔案
    // lng = 語系代碼 ns = namespace
    "loadPath": "/javascripts/locales/{{lng}}/{{ns}}.json"
    }
  });


export default i18n;

根據上面的 loadPath 路徑於server端建立語系檔案
javascripts/locales/en/common.json

{
    // 需使用 "
  "appName": "react-i18next-example" 
}

javascripts/locales/zh-TW/common.json

{
  "appName": "魔鬼精肉人"
}

配置 i18n.js
底下範例是搭配 react-redux 跟 react-router

...
..
.
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

// 可使用 changeLanguage 強制轉換語系
//i18n.changeLanguage('zh-TW');
render(
  <Provider store={store}>
      <I18nextProvider i18n={ i18n }>
            <Router history={history} routes={PageRoutes} />
      </I18nextProvider>
  </Provider>
  ,
  reactElement
);

與自己的 components 整合

import React, {Component} from 'react';
import { translate } from 'react-i18next';

class Main extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { t } = this.props;
        return (
            <div>{t('appName')}</div>
        );
    }
}

// 使用 react-i18next 的 HOC translate
export default translate()(Main); // 會採用預設的 defaultNS : common 語系檔案 common.json
// 也可以指定到哪個語系檔案 底下範例為 view.json 
//export default translate('view', { wait: true })(Main);

語系代碼會配置到瀏覽器 Local Storage key 為 i18nextLng 下
可於 chrome 開發人員工具下的 Resources 頁籤查看

← 使用 react-router 檢查路徑權限 使用 PubSubJS 來聯繫 Component 之間的資料 →
 
comments powered by Disqus