我之前刚好在React项目里集成过Google Translation API，给你梳理下最简单的实现流程，亲测可行～

第一步：准备Google Translation API密钥 #

首先得完成Google Cloud的基础配置：

• 登录Google Cloud控制台，创建一个新项目
• 搜索并启用「Cloud Translation API」
• 生成并保存好你的API密钥（这东西千万别随便泄露）

第二步：快速测试实现（仅用于开发测试） #

如果只是想快速验证功能，可以直接在React里用axios或fetch调用API，但生产环境绝对不能这么做——前端代码里的API密钥很容易被扒走盗用。

先安装axios（用原生fetch也可以，只是axios更顺手）：

npm install axios

然后写一个翻译函数+简单的调用组件：

import { useState } from 'react';
import axios from 'axios';

// 测试用翻译函数，生产环境别直接放密钥！
const translateText = async (text, sourceLang, targetLang) => {
  const apiKey = '你的API密钥';
  const apiUrl = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;

  try {
    const res = await axios.post(apiUrl, {
      q: text,          // 要翻译的文本内容
      source: sourceLang, // 源语言代码（比如en=英文，zh=中文）
      target: targetLang  // 目标语言代码
    });
    return res.data.data.translations[0].translatedText;
  } catch (err) {
    console.error('翻译请求出错:', err);
    throw err;
  }
};

// 翻译组件示例
export default function Translator() {
  const [inputText, setInputText] = useState('');
  const [translatedResult, setTranslatedResult] = useState('');

  const handleTranslate = async () => {
    if (!inputText.trim()) return;
    try {
      const result = await translateText(inputText, 'en', 'zh');
      setTranslatedResult(result);
    } catch (err) {
      alert('翻译失败，请检查API密钥或网络连接');
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px' }}>
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="输入要翻译的英文文本"
        rows={4}
        style={{ width: '100%', marginBottom: '12px' }}
      />
      <button onClick={handleTranslate} style={{ padding: '8px 16px' }}>翻译成中文</button>
      {translatedResult && (
        <div style={{ marginTop: '20px' }}>
          <h4>翻译结果：</h4>
          <p style={{ fontSize: '16px', lineHeight: '1.5' }}>{translatedResult}</p>
        </div>
      )}
    </div>
  );
}

第三步：生产环境安全方案（必须做！） #

直接在前端暴露API密钥风险极高，正确的做法是通过自己的后端代理请求：

1. 搭建简单的Node.js后端

先安装后端依赖：

npm init -y
npm install express axios dotenv cors

创建server.js文件：

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// 翻译代理接口
app.post('/api/translate', async (req, res) => {
  const { text, sourceLang, targetLang } = req.body;
  const apiKey = process.env.GOOGLE_API_KEY; // 从环境变量读取密钥
  const apiUrl = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;

  try {
    const response = await axios.post(apiUrl, {
      q: text,
      source: sourceLang,
      target: targetLang
    });
    res.json({ translatedText: response.data.data.translations[0].translatedText });
  } catch (error) {
    res.status(500).json({ error: '翻译请求失败，请稍后重试' });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`后端服务运行在端口${PORT}`);
});

创建.env文件存放密钥（这个文件要加入.gitignore，别提交到代码仓库）：

GOOGLE_API_KEY=你的API密钥

2. 修改React前端的翻译函数

现在前端不再直接调用Google的API，而是调用自己的后端接口：

const translateText = async (text, sourceLang, targetLang) => {
  try {
    const res = await axios.post('http://localhost:3001/api/translate', {
      text,
      sourceLang,
      targetLang
    });
    return res.data.translatedText;
  } catch (err) {
    console.error('翻译出错:', err);
    throw err;
  }
};

额外提示 #

• 语言代码参考Google官方规范，比如zh-CN（简体中文）、ja（日语）、fr（法语）等
• 如果不需要指定源语言，可以去掉source参数，API会自动检测
• 注意API的调用配额和计费规则，避免超出预算

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