当前位置：首页 > React

react多语如何实现

2026-02-12 08:17:06React

实现 React 多语言支持的方案

方案一：使用 react-i18next 库
安装依赖包：

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

创建配置文件（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,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    }
  });

export default i18n;

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

{
  "welcome": "Welcome",
  "button": {
    "submit": "Submit"
  }
}

在组件中使用：

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('zh')}>切换中文</button>
    </div>
  );
}

方案二：使用 react-intl 库
安装依赖：

react多语如何实现

npm install react-intl

配置语言包（messages.js）：

const messages = {
  en: {
    greeting: 'Hello',
  },
  zh: {
    greeting: '你好',
  },
};
export default messages;

包裹根组件：

import { IntlProvider } from 'react-intl';
import messages from './messages';

function AppWrapper() {
  const locale = 'en'; // 动态获取用户语言
  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <App />
    </IntlProvider>
  );
}

组件内使用：

react多语如何实现

import { FormattedMessage } from 'react-intl';

function Greeting() {
  return <FormattedMessage id="greeting" />;
}

方案三：自定义多语言管理
创建语言上下文：

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

export const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');
  const translations = {
    en: { welcome: 'Welcome' },
    zh: { welcome: '欢迎' },
  };
  return (
    <LanguageContext.Provider value={{ language, setLanguage, translations }}>
      {children}
    </LanguageContext.Provider>
  );
};

组件调用示例：

import { useContext } from 'react';
import { LanguageContext } from './LanguageContext';

function Header() {
  const { language, setLanguage, translations } = useContext(LanguageContext);
  return (
    <h1 onClick={() => setLanguage('zh')}>
      {translations[language].welcome}
    </h1>
  );
}

关键注意事项