ReactJS中如何将英文输入框文本翻译为印地语？含翻译工具选型

你之前安装的react-google-translate失效原因 #

• 该库已停止维护超过4年，依赖的谷歌翻译无密钥公开接口已被谷歌增加跨域、反爬限制，无法正常返回结果
• 库本身未适配React 16.8+的钩子语法，无官方文档、无可用示例代码，不建议继续使用

React生态翻译工具选型参考 #

• @google-cloud/translate：谷歌云官方维护的翻译SDK，印地语翻译准确率高，服务稳定性有保障，需要申请谷歌云服务密钥，提供免费调用额度，适合生产环境使用
• i18next 生态：适合全站多语言国际化场景，如果仅需要实现单次输入翻译能力，可搭配对应翻译后端接口使用
• @vitalets/google-translate-api：社区维护的免费谷歌翻译接口封装，无需申请服务密钥，适合个人项目、原型开发使用，不建议高并发生产场景使用

可直接复用的基础功能实现代码 #

首先卸载无效依赖，安装可用依赖：

npm uninstall react-google-translate
npm install react react-dom

注意：前端直接调用公开翻译接口存在跨域问题，开发阶段可通过本地代理、公共CORS代理解决，生产环境请将翻译请求转发至自有服务端处理

以下是单输入框翻译组件的完整实现：

import { useState } from 'react';

// 翻译方法，生产环境请替换为自有后端接口调用
const translateToHindi = async (text) => {
  if (!text.trim()) return '';
  // 接口参数说明：sl指定源语言为英文en，tl指定目标语言为印地语hi
  const response = await fetch(`你的代理地址/translate_a/single?client=gtx&sl=en&tl=hi&dt=t&q=${encodeURIComponent(text)}`);
  const result = await response.json();
  // 拼接返回的分段翻译结果
  return result[0].map(segment => segment[0]).join('');
};

export default function HindiTranslator() {
  const [inputVal, setInputVal] = useState('');
  const [translatedResult, setTranslatedResult] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errMsg, setErrMsg] = useState('');

  const handleTranslate = async () => {
    setIsLoading(true);
    setErrMsg('');
    try {
      const res = await translateToHindi(inputVal);
      setTranslatedResult(res);
    } catch (e) {
      setErrMsg('翻译请求失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ maxWidth: '600px', margin: '24px auto' }}>
      <h4>英文转印地语</h4>
      <textarea
        value={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        placeholder="请输入英文内容"
        rows={4}
        style={{ width: '100%', padding: '8px', margin: '8px 0', boxSizing: 'border-box' }}
      />
      <button
        onClick={handleTranslate}
        disabled={isLoading || !inputVal.trim()}
        style={{ padding: '6px 16px', cursor: 'pointer' }}
      >
        {isLoading ? '翻译中' : '翻译'}
      </button>
      {errMsg && <p style={{ color: 'red', margin: '8px 0' }}>{errMsg}</p>}
      {translatedResult && (
        <div style={{ marginTop: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
          <p style={{ fontWeight: 'bold', margin: '0 0 8px 0' }}>印地语翻译结果：</p>
          <p style={{ margin: 0 }}>{translatedResult}</p>
        </div>
      )}
    </div>
  );
}

生产环境优化建议 #

• 不要在前端代码中暴露翻译服务的密钥，所有翻译请求必须经自有后端转发
• 可给输入框增加300ms左右的防抖，避免用户输入过程中频繁触发请求，减少资源浪费
• 针对长文本翻译可增加分段处理逻辑，避免接口超出字符限制报错

内容的提问来源于stack exchange，提问作者Komal k