react-i18n构建项目国际化

引入I18n及其配置

创建locales文件夹,存放languages语言json

import en from './languages/en.json'
import zh from './languages/zh.json'

export const resources = {
    en: {
        translation: en,
    },
    zh: {
        translation: zh,
    },
}

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { resources } from './resource'

i18n.use(LanguageDetector)
    // 将 i18n 实例传递给 react-i18next
    .use(initReactI18next)
    // 初始化 i18next
    // 所有配置选项: https://www.i18next.com/overview/configuration-options
    .init({
        resources,
        fallbackLng: 'zh',
        // lng: navigator.language,
        lng: 'en',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
    })

export default i18n

配置完毕后,在项目入口文件中引入locales文件夹

使用

class组件中

import React from "react";
import { withTranslation } from "react-i18next";

class App extends React.Component {

  render() {
	const { t } = this.props;
	return (<div className="App">
	  {t("title")}
	</div>);
  }
}

export default withTranslation()(App);

hook组件中

import { useTranslation } from "react-i18next";

function App() {
  const { t } = useTranslation();
  return (
	<div className="App">
	  {t("title")}
	</div>
  );
}

export default App;

任何位置中引用(在class项目中的很多配置文件中使用)

import i18n from '../locales'

const t = i18n.getFixedT(null, 'translation')

组件引用

import { Translation } from "react-i18next";

function App() {
  return (
		<Translation>
			{
				(t) => 
				 <div className="App">
						  {t("title")}
					</div>
			}
		</Translation>
  );
}

export default App;

通过t转换的过程

可以通过vscode的一个插件 Du i18n来一键转化

jsx 结尾的文件可以自带jsx代码环境
js 结尾的文件只可以简单替换

Locales的文件

普通字符串就是一一对应
数组等其他类型统一转换的话
- 增加配置 { returnObjects: true }
  t('viewDetail.config.NGSDectectionLabels', { returnObjects: true })
jsx 字符 (dangerouslySetInnerHTML来解析字符串中的html,然后传值)
- eg: 已录入 22 个样本
  <div dangerouslySetInnerHTML={{ __html: t('numberOfSamples', { sampleNumber }) }}></div> "firstPage.card.text4": "已录入 <span>{{sampleNumber}}</span> 个样本", "firstPage.card.text4": "<span>{{sampleNumber}}</span> samples have been entered",