当前位置：首页 > React

react如何实现中英文翻译

2026-01-26 04:40:38React

实现中英文翻译的方法

在React中实现中英文翻译通常需要结合国际化（i18n）库或第三方翻译API。以下是几种常见的方法：

使用i18n库（静态翻译）

静态翻译适用于界面文本的本地化，通过预定义的翻译文件实现语言切换。

安装react-i18next库：

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

创建翻译配置文件（如i18n.js）：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: { welcome: "Welcome" } },
      zh: { translation: { welcome: "欢迎" } }
    },
    lng: localStorage.getItem('language') || 'en',
    fallbackLng: 'en'
  });

在组件中使用翻译：

import { useTranslation } from 'react-i18next';

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

调用翻译API（动态翻译）

动态翻译适用于用户输入内容的实时翻译，需要调用第三方API（如Google Translate、百度翻译等）。

封装API请求函数（以百度翻译API为例）：

const translateText = async (text, from, to) => {
  const response = await fetch(
    `https://api.fanyi.baidu.com/api/trans/vip/translate?q=${text}&from=${from}&to=${to}&appid=YOUR_APPID&salt=123&sign=YOUR_SIGN`
  );
  const data = await response.json();
  return data.trans_result[0].dst;
};

在React组件中调用：

function TranslationComponent() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  const handleTranslate = async () => {
    const result = await translateText(input, 'zh', 'en');
    setOutput(result);
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleTranslate}>翻译</button>
      <div>{output}</div>
    </div>
  );
}

结合本地缓存优化

对于静态内容，可以将翻译结果缓存到localStorage中减少API调用：

react如何实现中英文翻译

const cachedTranslate = async (text, from, to) => {
  const cacheKey = `${from}-${to}-${text}`;
  const cached = localStorage.getItem(cacheKey);
  if (cached) return cached;

  const result = await translateText(text, from, to);
  localStorage.setItem(cacheKey, result);
  return result;
};