在react项目中如何引入国际化

原文合集地址如下,有需要的朋友可以关注

本文地址

合集地址

react-i18next

在 React 项目中引入国际化(Internationalization,简称 i18n)可以使用第三方库来实现。其中,最常用且流行的国际化库是 react-i18next,它基于 i18next 实现,提供了方便易用的国际化功能。下面是在 React 项目中使用 react-i18next 的基本步骤:

  1. 安装依赖:

首先,在 React 项目中安装 react-i18nexti18next 依赖:

npm install i18next react-i18next
  1. 初始化 i18next:

在项目的入口文件(通常是 index.jsApp.js)中初始化 i18next:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import { nextLocal } from './nextLocals'; // 定义的语言文件

i18n
  .use(initReactI18next)
  .init({
    // 设置语言资源,可以根据需要引入其他语言文件
    resources: {
      en: {
        translation: {
          // 将所有需要国际化的文本放在这里
          // 例如:"hello": "Hello",
          ...nextLocal.en
        },
      },
      zh: {
        translation: {
          // 中文翻译
          // 例如:"hello": "你好",
          ...nextLocal.zh
        },
      },
    },
    lng: 'zh', // 默认语言
    fallbackLng: 'zh', // 如果当前语言没有对应的翻译,将使用该语言作为备用
    interpolation: {
      escapeValue: false, // 不要对翻译的文本进行转义,以支持 HTML 标签
    },
  });

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

上面用到的nextLocals文件如下:

// index.tsx
import homeEn from "./Home/en.json";
import homeZh from "./Home/zh.json";

export const nextLocal = {
  en: { ...homeEn },
  zh: { ...homeZh },
};

// ./Home/en.json
{
  "home": {
    "hello": "Hello"
  }
}

// ./Home/en.json
{
  "home": {
    "hello": "你好"
  }
}

不同页面用不同的文件夹管理,这样会更清楚。

  1. 切换语言:

可以通过 i18n.changeLanguage() 方法来在组件中切换语言。例如,可以在项目中添加一个按钮来切换语言,这里定义了一个ChangeLanguage文件,内容如下:

import React from "react";
import { Button } from "antd";
import { useTranslation } from "react-i18next";

const LanguageSwitcher=()=> {
  const { i18n } = useTranslation();

  const changeLanguage = (lng: "en" | "zh") => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <Button
        type="primary"
        style={{ marginRight: 8 }}
        onClick={() => changeLanguage("en")}
      >
        English
      </Button>
      <Button onClick={() => changeLanguage("zh")}>中文</Button>
    </div>
  );
}

export default LanguageSwitcher;

  1. 使用 useTranslation 钩子:

在需要国际化的组件中,可以使用 useTranslation 钩子来获取翻译函数,并进行文本的国际化:
这里引用了上面的组件ChangeLanguage,可以点击切换语言

import React from 'react';
import { useTranslation } from 'react-i18next';
import ChangeLang from './ChangeLanguage'

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      {/* 使用 t 函数进行国际化 */}
     <ChangeLang />
     <div style={{paddingTop: 16}}> {t('home.hello')}</div>
    </div>
  );
}

export default MyComponent;

react-intl-universal

使用 react-intl-universal 是另一个流行的 React 国际化库,它提供了简单易用的国际化功能。下面是在 React 项目中使用 react-intl-universal 的基本步骤:

  1. 安装依赖:

首先,在 React 项目中安装 react-intl-universal 依赖:

npm install react-intl-universal
  1. 初始化国际化资源:

在项目的入口文件(通常是 index.jsApp.js)中初始化国际化资源:

import React from 'react';
import ReactDOM from 'react-dom';
import intl from 'react-intl-universal';
import App from './App';

const locales = {
  en: require('./locales/en.json'), // 英文翻译文件
  zh: require('./locales/zh.json'), // 中文翻译文件
};

const currentLocale = localStorage.getItem('language') || 'zh'; // 默认语言
intl.init({
  currentLocale,
  locales,
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  1. 创建翻译文件:

在项目的 src 目录下,创建一个 locales 文件夹,并在其中添加语言文件。例如,创建 en.jsonzh.json 文件:

en.json:

{
  "hello": "Hello",
  "welcome": "Welcome, {name}"
}

zh.json:

{
  "hello": "你好",
  "welcome": "欢迎,{name}"
}
  1. 使用 FormattedMessage 组件:

在需要国际化的组件中,可以使用 FormattedMessage 组件来进行文本的国际化,并支持变量插值:

import React from 'react';
import { FormattedMessage } from 'react-intl-universal';

const MyComponent()=> {
  const name = 'John';

  return (
    <div>
      {/* 使用  组件进行国际化 */}
      <p>
      {intl.get('hello')}
      </p>

      <p>
      // 或者这么使用
        <FormattedMessage id="welcome" values={{ name }} />
      </p>
    </div>
  );
}

export default MyComponent;
  1. 切换语言:

您可以在项目中使用 intl.setLocale() 方法来切换语言。例如,您可以在项目中添加一个按钮来切换语言:

import React from 'react';

const LanguageSwitcher = ()=> {
  const changeLanguage = (locale: 'en' | 'zh') => {
    localStorage.setItem('language',locale); // 保存
    window.location.reload(); // 重新加载页面
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default LanguageSwitcher;

使用react-intl-universal需要注意的是,每次更新语言需要重新加载页面。

你可能感兴趣的:(react,javascript,前端,react,国际化,javascript)