i18next

i18n，Internationalization 国际化
因为单词太长，中间的 18 个字母被缩写为 18，再加上开头和结尾的字母，缩写 i18n
i18next文档 https://react.i18next.com/getting-started
github i18next https://github.com/i18next/react-i18next

i18n原理

1. 语言包作为静态资源单独保存：.json, .xml
2. 每一种语言对应一个文件
3. 切换语言时，语言文件也会随之切换
   1. 使用 Rreact.context进行跨组件传递
4. i18next
   1. react-i18next https://react.i18next.com/

安装 i18next

yarn add react-i18next i18next --save
# npm
$ npm install react-i18next i18next --save

i18n

1. class类组件使用，with高阶组件
   1. withTranslation, 首字母小写，就是高阶组件
   2. WithTranslation，首字母大写，就是ts的类型定义
   3. hooks使用 use
2. 需要在 redux里面修改

import {withTranslation, WithTranslation} from 'react-i18n'
class App extends React.Component<WithTranslation> {
  render() {
    const {t} = this.props
    return (
      <div>{t('home.title')}</div>
    )
  }
}
export default withTranslation()(App)

hooks

import { useTranslation, WithTranslation} from 'react-i18n'
function App<WithTranslation>() {
  const {t} = useTranslation()
  return (
    <div>{t('home.title')}</div>
  )
}
export default App

redux

import {i18n} from 'i18next'
if(action.type === 'lang') {
  // 有副作用
  i18n.changeLanguage(action.payload)
}

i18nChange

i18nChange = e => {
  return {
    zh: { name: e.name },
    en: { name: e.en_name },
  };
};