react中如何使用i18n国际化

 npm install i18next react-i18next --save

 
1、安装以后创建i18n文件夹
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import translation_en from "./en.json";
import translation_zh from "./zh.json";

const resources = {
  en: {
    translation: translation_en,
  },
  zh: {
    translation: translation_zh,
  },
};

i18n
  .use(initReactI18next) // 进行初始化
  .init({
    resources, // 我们自己的语言文件
    lng: "zh", // 默认初始化语言
    // keySeparator: false, // we do not use keys in form messages.welcome
    // header.slogan
    interpolation: {
      escapeValue: false, // 不会为了xss攻击，而把我们的内容强行转成字符串
    },
  });

export default i18n;

2、使用，直接在index.tsx中直接引入我们创建的文件
import "./i18n/configs"  // 不需要配合context，provider,, 插件会自动绑定，简单引入即可



3、组件中如何使用？

import { withTranslation, WithTranslation } from "react-i18next";
  // 小写的是高阶组件   大写的是TS的类型定义
class HomePageComponent extends React.Component<WithTranslation> {
  render() {
    const { t } = this.props;
    return (
        <>
          <div> {t("home_page.new_arrival")}</div>
        </>
    )
 }
}

export const HomePage = withTranslation()(HomePageComponent)

这样就可以使用了

4、函数式组件使用

import React from "react";
import { Layout, Typography } from "antd";
import { useTranslation } from "react-i18next";

export const Footer : React.FC = () => {
    const { t } = useTranslation()
    return (
      <Layout.Footer>
        <Typography.Title level={3} style={{ textAlign: "center" }}>
            {t("footer.detail")}
        </Typography.Title>
      </Layout.Footer>
    );
}


5、在reducer中要操作i18n的配置文件
import i18n from "i18next";

export interface LanguageState {
    language: string
    languageList: { name: string, code: string }[]
}

const defaultState: LanguageState = {
    language: "zh",
    languageList: [
        { name: "中文", code: "zh" },
        { name: "English", code: "en" },
    ],
}

export default (state = defaultState, action) => {
    console.log(state,action)
    if (action.type === 'change_language') {
        i18n.changeLanguage(action.payload); // 这样处理是不标准的，有副作用
        const newState = { ...state, language: action.payload  }
        return newState
    }
    return state
}