日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?中使用?react-i18next?國際化的過程(react-i18next?的基本用法)_React

作者：太輕描淡寫了 ? 更新時間： 2023-02-15 編程語言

本文使用 React-i18next 庫結合 React， 介紹如何在 React 中配置使用國際化。
官方地址：i18next | react-i18next

簡介

react-i18next 是基于 i18next 的一款強大的國際化框架，可以用于 react 和 react-native 應用；
react-i18next 特點：

  • 提供多種組件可以在hoc, hook 和 class 的情況下進行國際化操作；
  • 基于 i18next 不僅限于react，學一次就可以用在其它地方；
  • 適合服務器的渲染；
  • 有許多插件的支持，比如可以用插件檢測當前系統的語言環境，從服務器或者文件系統加載翻譯資源；

安裝與使用

安裝

# npm
npm install react-i18next i18next --save
# 如果需要檢測當前瀏覽器的語言或者從服務器獲取配置資源可以安裝下面依賴
npm install i18next-http-backend i18next-browser-languagedetector --save

準備新建一個 React 項目，安裝依賴包；

npm install react-i18next i18next --save

2.新建文件 en.json 和 zh.json;

src\react-i18next\locales\en.json

{
	title: "Hello Word"
}

src\react-i18next\locales\zh.json

{
	title: "你好 世界"
}

3.新建 resources.js 和 i18n.js;

src\react-i18next\locales\resources.js

import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

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

src\react-i18next\i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 將 i18n 實例傳遞給 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置選項: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "zh",
		lng: "zh",
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

使用

1.在程序入口引入 i118n;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./react-i18next/i18n";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>
);

2.在 Hooks 中使用國際化；

import { useTranslation } from "react-i18next";

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

export default App;

3.在 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);

檢測當前瀏覽器語言國際化組件

1.安裝依賴

npm install i18next-browser-languagedetector --save

2.配置使用插件

// src\react-i18next\i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 檢測用戶語言
	// 操作文檔: https://github.com/i18next/i18next-browser-languageDetector
	.use(LanguageDetector)
	// 將 i18n 實例傳遞給 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置選項: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "en",
		lng: navigator.language,
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

上面代碼，首先導入 LanguageDetector，其次 use(LanguageDetector), 使用插件，最終在 init 配置項里配置 lng: navigator.language, 至此切換瀏覽器語言國際化組件完成；

手動切換國際化語言

// class 組件
const { t, i18n } = this.props;
i18n.changeLanguage("en"); 		// 手動切換到英文

// Hooks 組件
const { t, i18n } = useTranslation();
i18n.changeLanguage("zh"); 		// 手動切換到中文

總結

i18next 是一款強大的國際化框架，react-i18next 是基于 i18next 適用于 React 的框架，另外 i18next 還和很多的前端框架可以結合，所以只需要學習一次，學習成本低；
本文介紹了 react-i18next 的基本用法，如果更特殊的需求，文章開頭的官方地址可以找到答案；

原文鏈接：https://www.cnblogs.com/operate/p/16199940.html

欄目分類
最近更新