Reactjs 如何在react中使用googletranslationapi

我已经浏览了网站上的文档，但是没有关于如何在react项目中使用google翻译api的示例。有人知道如何集成它，这样我就可以对API进行简单的转换调用了吗？

---

谢谢

在Gregory的帮助下，google translate只使用了一个REST api，我通过使用fetch进行一个简单调用实现了这一点。如果其他人也尝试这样做，我将在此处添加一些代码：

let fromLang = 'en';
let toLang = 'no'' // translate to norwegian
let text = 'something to translate';

const API_KEY = [YOUR_API_KEY];

let url = `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`;
url += '&q=' + encodeURI(text);
url += `&source=${fromLang}`;
url += `&target=${toLang}`;

fetch(url, { 
  method: 'GET',
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  }
})
.then(res => res.json())
.then((response) => {
  console.log("response from google: ", response);
})
.catch(error => {
  console.log("There was an error with the translation request: ", error);
});

在这里你可以做一些反应

---

希望这能帮助别人，并感谢Gregory提供的最明显的帮助：）

我是通过nodeJs这样做的，在阅读了你的问题后，我通过我的本地主机发出了一个请求，希望这能帮上一点忙

NodeJs index.js

route.post('/', (req, res) => {
    var q = req.body.q;
    console.log(q);
  var options = { method: 'POST',
  url: 'https://translation.googleapis.com/language/translate/v2',
  form: 
   { key: process.env.TRANSLATE,
     q: q,
     target: 'en' } };
    request(options, function (error, response, body) {
    if (error) throw new Error(error);
    console.log(body);
    res.send(body);
    });
})

ReactJS App.js

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      value: '',
      translated: '...'
    }
    this.translate=this.translate.bind(this);
  }

  translate(){
    axios.post('http://localhost:9000/translate',{q:this.state.value})
    .then(data => {
      this.setState({translated: data.data.data.translations[0].translatedText})
      console.log(data.data.data.translations[0].translatedText)
    }).catch(err => {
      console.log('error')
    })
  }



  render() {
    return (
      <div>
        <input 
          value={this.state.value}
          onChange={(e)=>this.setState({value: e.target.value})}
          type="text"/>
        <button onClick={this.translate}>Submit</button>
        <h1>{this.state.translated}</h1>
      </div>

    );
  }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
翻译成：“…”
}
this.translate=this.translate.bind（this）；
}
翻译（）{
轴心柱http://localhost:9000/translate“，{q:this.state.value}）
。然后（数据=>{
this.setState（{translated:data.data.data.translations[0].translatedText}）
console.log（data.data.data.translations[0].translatedText）
}).catch（错误=>{
console.log（'错误'）
})
}
render（）{
返回(
this.setState（{value:e.target.value}）}
type=“text”/>
提交
{this.state.translated}
);
}
}
导出默认应用程序；

只是更正url中的拼写错误

让url=`https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`；
url+='&q='+encodeURI（文本）；
url+=`&source=${fromLang}`；
url+=`&target=${toLang}`自动使用用户语言：

    import React from 'react'

    export default class Translate extends React.Component{

      constructor(props){

        super(props)

        this.state={

          greeting:'I say: "Hello, you all!"',
          greeting_in_user_language: null

        }

        this.userLanguage = navigator.language.slice(0,2)
        this.API_KEY = 'YOUR_API_KEY'
        this.URL = `https://translation.googleapis.com/language/translate/v2?key=${this.API_KEY}&source=en`
        this.URL += `&target=${this.userLanguage}`

      }
      componentWillMount() {

        this.translate( 'greeting_in_user_language', '&q=' + encodeURI(this.state.greeting))

      }

      translate = (key,string_to_translate) => {


        fetch(this.URL+string_to_translate)
          .then(res => res.json())
          .then(
            ( res ) => { 
              let text = res.data.translations[0].translatedText.replace(/(&quot\;)/g,"\"")
              this.setState({[key]:text})
            }      
          ) .catch(
              ( error ) => { 
                console.log("There was an error: ", error); 
              }
            )
      }

      render() {
        return(
          <>
          <section className="page">
            <p>{
             this.state.greeting_in_user_language ?  
                this.state.greeting_in_user_language : 
                this.state.greeting
            }</p>
          </section>
          </>
        )
      }
     }

从“React”导入React
导出默认类Translate扩展React.Component{
建造师（道具）{
超级（道具）
这个州={
问候语：“我说：“大家好！”，
以用户语言表示的问候语：null
}
this.userLanguage=navigator.language.slice（0,2）
this.API\u KEY='YOUR\u API\u KEY'
this.URL=`https://translation.googleapis.com/language/translate/v2?key=${this.API_KEY}&source=en`
this.URL+=`&target=${this.userLanguage}`
}
组件willmount（）{
this.translate（'greeting_in_user_language'，'&q='+encodeURI（this.state.greeting））
}
翻译=（键，字符串到翻译）=>{
获取（this.URL+string\u to\u translate）
.then（res=>res.json（））
.那么(
（res）=>{
让text=res.data.translations[0].translatedText.replace（/（“\”）/g，“\”）
this.setState（{[key]：text}）
}      
).接住(
（错误）=>{
log（“出现错误：”，错误）；
}
)
}
render（）{
返回(
{
this.state.greeting_是否使用用户语言？
this.state.greeting_（用户语言）：
这是我的问候语
}

)
}
}
从“React”导入React，{useffect，useState}；
从“axios”导入axios；
const Convert=（{text，language}）=>{
常量[convertedText，setConvertedText]=useState（“”）；
useffect（（）=>{
常数响应=axios
.邮政(
'https://translation.googleapis.com/language/translate/v2',
{},
{
参数：{
问：文本，
目标：语言，
关键字：“AIzaSyCHUCmpR7cT_yDFHC98CZJy2LTms-IwDlM”
}
}
)
。然后（（响应）=>{
setConvertedText（response.data.data.translations[0].translatedText）；
})
.catch（（错误）=>{
log（'restapi错误'，err）；
});
}，[文本、语言]；
返回{convertedText}；
};
导出默认转换；

params对象中的“q”参数是我们想要翻译的文本，“target”是我们想要翻译文本的语言。
Google translate只使用REST api。这可以独立于您正在使用的任何前端框架使用。您想什么时候调用api？现在我只是在尝试为了让它正常工作。我尝试过向index.html文件添加不同的脚本标记和代码，但我真的很想从我的应用程序中的组件调用API。目前为止运气不好。查看google cloud示例，有几种语言的安装说明，但没有反应。啊，也许我可以使用fetch使用API进行调用键..感谢您的关注！我使用fetch获得了类似的结果，但我也喜欢您的答案。当然！感谢您发布您的解决方案，我也会尝试一下。我应该更经常使用fetch。如果您只是想在页面加载时进行翻译，您可以将调用放入componentWillMount方法中，并将结果存储在sta中在你的renderkey和target内部url中使用这个状态，没有等号（=）才能正常工作。除了这个完美的解决方案，谢谢你！我正在寻找一个在chrome扩展中简单使用rest API的选项（没有客户端libs等），这是一段代码，可以运行，甚至可以在web上显示。你为我节省了几个小时的工作和逆向工程！！这似乎不是问题的答案。你能写一个完整的答案，说明如何实现预期的结果吗？