当前位置：首页 > React

react多语如何实现

2026-02-26 18:15:03React

实现 React 多语言支持的常用方法

使用第三方库 react-i18next react-i18next 是基于 i18next 的 React 多语言解决方案，提供组件和钩子方式管理多语言。

安装依赖：

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

配置 i18n 实例（i18n.js）：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: false,
    interpolation: {
      escapeValue: false,
    }
  });

export default i18n;

创建语言资源文件（locales/en/translation.json）：

{
  "welcome": "Welcome"
}

在组件中使用：

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('zh')}>中文</button>
    </div>
  );
}

自定义多语言实现方案

创建语言上下文和钩子 构建自定义的多语言管理系统，适合简单项目。

创建语言上下文（LanguageContext.js）：

import React, { createContext, useState } from 'react';

export const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');
  const [translations, setTranslations] = useState({
    en: { welcome: 'Welcome' },
    zh: { welcome: '欢迎' }
  });

  const t = (key) => translations[language][key] || key;

  return (
    <LanguageContext.Provider value={{ language, setLanguage, t }}>
      {children}
    </LanguageContext.Provider>
  );
};

在应用中使用：

import { LanguageProvider } from './LanguageContext';

function App() {
  return (
    <LanguageProvider>
      <HomePage />
    </LanguageProvider>
  );
}

function HomePage() {
  const { t, language, setLanguage } = useContext(LanguageContext);

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => setLanguage('zh')}>中文</button>
    </div>
  );
}

动态加载语言资源

按需加载语言包 对于大型应用，可以采用代码分割方式动态加载语言资源。

配置动态导入（i18n.js）：

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
  fallbackLng: 'en'
});

使用 Suspense 处理加载状态：

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback="Loading...">
      <HomePage />
    </Suspense>
  );
}

多语言路由处理

结合路由切换语言 通过 URL 参数或路径前缀管理语言状态。

使用 react-router 的示例：

import { useParams } from 'react-router-dom';

function LanguageWrapper() {
  const { lang } = useParams();
  const { i18n } = useTranslation();

  useEffect(() => {
    i18n.changeLanguage(lang);
  }, [lang]);

  return <AppContent />;
}

语言持久化存储

保存用户语言偏好 使用 localStorage 或 cookies 存储用户选择的语言。

扩展 LanguageProvider：

useEffect(() => {
  const savedLanguage = localStorage.getItem('language') || 'en';
  setLanguage(savedLanguage);
}, []);

const changeLanguage = (lang) => {
  setLanguage(lang);
  localStorage.setItem('language', lang);
};

测试多语言组件

编写多语言测试用例 使用 Jest 测试多语言组件的行为。

示例测试：

react多语如何实现

test('changes language correctly', () => {
  const { getByText } = render(
    <LanguageProvider>
      <HomePage />
    </LanguageProvider>
  );

  fireEvent.click(getByText('中文'));
  expect(getByText('欢迎')).toBeInTheDocument();
});