多國語系 i18n

在 locales 目錄下，有各個語言的目錄。而每語言的目錄下，又有著各種命名空間的 json 檔。

§ lng 是指語系代碼 ( language )

§ ns 是指命名空間 ( namespace )

- locales
  - en
    - common.json
    - home.json
  - zh-TW
    - common.json
    - home.json
  - zh
    - common.json
    - home.json

前往 /src/i18n/initOption.js

const initOption = {
  whitelist: ['en', 'zh-TW', 'zh'], // array of allowed languages

前往 /src/i18n/initOption.js

在上面的 ns 陣列中加入你要增加的命名空間

const ns = [
  'common',
  'home',
  'about',
  'cardColumns',
];

Step1 : 先匯入模組

import { translate } from 'react-i18next';

Step2 : 在 class 上方用 @translate() 語法

@translate(['common', 'home'])
export default class Home extends React.Component {...

Step3 : 在 class 中的 static propTypes 增加 t 的驗證

static propTypes = {
  t: React.PropTypes.func.isRequired,
};

Step4 : 在 this.props 取得 t

const { t } = this.props;

Step5 : 使用 t

t('nav.home')
t('home:myCat')

多國語系(i18n)