欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React國際化react-i18next詳解

 更新時間：2021年10月22日 14:33:14   作者：貓老板的豆  
react-i18next 是基于 i18next 的一款強大的國際化框架，可以用于 react 和 react-native 應用，是目前非常主流的國際化解決方案。這篇文章主要介紹了React國際化react-i18next的相關(guān)知識,需要的朋友可以參考下

在這里插入圖片描述

簡介

react-i18next 是基于 i18next 的一款強大的國際化框架，可以用于 react 和 react-native 應用，是目前非常主流的國際化解決方案。

i18next 有著以下優(yōu)點：

  • 基于i18next不僅限于react，學一次就可以用在其它地方
  • 提供多種組件在hoc、hook和class的情況下進行國際化操作
  • 適合服務端的渲染
  • 歷史悠久，始于2011年比大多數(shù)的前端框架都要年長
  • 因為歷史悠久所以更成熟，目前還沒有i18next解決不了的國際化問題
  • 有許多插件的支持，比如可以用插件檢測當前系統(tǒng)的語言環(huán)境，從服務器或者文件系統(tǒng)加載翻譯資源

安裝

需要同時安裝 i18next 和 react-i18next 依賴：

npm install react-i18next i18next --save
或
yarn add react-i18next i18next --save

配置

在src下新建i18n文件夾，以存放國際化相關(guān)配置

i18n中分別新建三個文件：

  • config.ts：對 i18n 進行初始化操作及插件配置
  • en.json：英文語言配置文件
  • zh.json：中文語言配置文件

在這里插入圖片描述 

en.json

{
    "header": {
        "register":"Register",
        "signin":"Sign In",
        "home": "Home"
    },
    "footer": {
        "detail" : "All rights reserved @ React"
    },
    "home": {
        "hot_recommended": "Hot Recommended",
        "new_arrival": "New arrival",
        "joint_venture": "Joint Venture"
    }
}

zh.json

{
    "header": {
        "register":"注冊",
        "signin":"登陸",
        "home": "首頁"
    },
    "footer": {
        "detail" : "版權(quán)所有 @ React"
    },
    "home": {
        "hot_recommended": "爆款推薦",
        "new_arrival": "新品上市",
        "joint_venture": "合作企業(yè)"
    }
}

config.ts

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',
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

使用

引用配置文件

在index.tsx中引用i18n的配置文件 ：import './i18n/config';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n/config'; // 引用配置文件

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

在組件中使用

方法一

在 類組件 中使用withTranslation 高階函數(shù)(HOC) 來完成語言配置的數(shù)據(jù)注入

import React from 'react';
import styles from './Home.module.css';

// 引入HOC高階函數(shù)withTranslation 和 i18n的ts類型定義WithTranslation 
import { withTranslation, WithTranslation } from "react-i18next"

class HomeComponent extends React.Component<WithTranslation> {
    render() {
        const { t } = this.props;
        return <>
           <h1>{t('header.home')}</h1>
           <ul>
               <li>{t('home.hot_recommended')}</li>
               <li>{t('home.new_arrival')}</li>
               <li>{t('home.joint_venture')}</li>
           </ul>
        </>
    }
}

export const Home = withTranslation()(HomeComponent); // 使用withTranslation高階函數(shù)來完成語言配置的數(shù)據(jù)注入

方法二

在 函數(shù)式組件 中使用useTranslation 的 hook 來處理國際化

import React from 'react';
import { useTranslation, Trans } from 'react-i18next'

export const Home: React.FC = () => {
    const { t } = useTranslation()
    return (
		<div>
			<h1>{t('header.home')}</h1>
			<ul>
				<li>{t('home.hot_recommended')}</li>
				{/* 還有一種方式 */}
				<li><Trans>home.new_arrival</Trans></li>
			</ul>
		</div>    
    );
};

切換語言

import i18n from 'i18next';

const changeLanguage= (val) => {
	i18n.changeLanguage(val); // val入?yún)⒅禐?en'或'zh'
};

或

import React from 'react';
import { useTranslation } from 'react-i18next'

export const Home: React.FC = () => {
    const { t, i18n } = useTranslation()
    return (
		<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
    );
};

到此這篇關(guān)于React國際化react-i18next的文章就介紹到這了,更多相關(guān)React國際化react-i18next內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 使用 React Router Dom 實現(xiàn)路由導航的詳細過程

    使用 React Router Dom 實現(xiàn)路由導航的詳細過程

    React Router Dom 是 React 應用程序中用于處理路由的常用庫,它提供了一系列組件和 API 來管理應用程序的路由,這篇文章主要介紹了使用 React Router Dom 實現(xiàn)路由導航,需要的朋友可以參考下
    2024-03-03
  • React框架快速實現(xiàn)簡易的Markdown編輯器

    React框架快速實現(xiàn)簡易的Markdown編輯器

    這篇文章主要為大家介紹了使用React框架實現(xiàn)簡易的Markdown編輯器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-04-04
  • React createElement方法使用原理分析介紹

    React createElement方法使用原理分析介紹

    這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • React router基礎使用方法詳解

    React router基礎使用方法詳解

    這篇文章主要介紹了React router基礎使用方法，React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫之一，近一半的React項目中使用了React Router，下面就來看看如何在React項目中使用
    2023-04-04
  • 新建的React Native就遇到vscode報警解除方法

    新建的React Native就遇到vscode報警解除方法

    這篇文章主要為大家介紹了新建的React Native就遇到vscode報警解除方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-10-10
  • React報錯信息之Expected?an?assignment?or?function?call?and?instead?saw?an?expression

    React報錯信息之Expected?an?assignment?or?function?call?and?

    這篇文章主要介紹了React報錯之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個示例來展示錯誤是如何產(chǎn)生的，需要的朋友可以參考下
    2022-08-08
  • react組件中的constructor和super知識點整理

    react組件中的constructor和super知識點整理

    這篇文章主要介紹了react組件中的constructor和super知識點整理,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-08-08
  • 淺談箭頭函數(shù)寫法在ReactJs中的使用

    淺談箭頭函數(shù)寫法在ReactJs中的使用

    這篇文章主要介紹了淺談箭頭函數(shù)寫法在ReactJs中的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • react-router-dom?降低版本的兩種方法詳解

    react-router-dom?降低版本的兩種方法詳解

    這篇文章主要介紹了react-router-dom?降低版本的兩種方法,本篇文章就記錄下如何降低 react-router-dom 為 v5 版本的兩種方法，需要的朋友可以參考下
    2022-12-12
  • React中使用Vditor自定義圖片詳解

    React中使用Vditor自定義圖片詳解

    這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12

最新評論