gpt4 book ai didi

javascript - react js 谷歌翻译不工作

转载 作者:行者123 更新时间:2023-12-05 04:06:05 30 4
gpt4 key购买 nike

在 React JS 中尝试实现谷歌翻译,并在我的脚本文件中包含翻译组件。

Googletranslate.js:

import React, { Component } from 'react';

class GoogleTranslate extends Component {
googleTranslateElementInit () {
//alert("test2")
/* eslint-disable no-new */
new window.google.translate.TranslateElement({pageLanguage: 'pt', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element')
}

componentDidMount() {
// alert("test")

var addScript = document.createElement('script');
addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
document.body.appendChild(addScript);
window.googleTranslateElementInit = this.googleTranslateElementInit;
}

render() {
return (
// <script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' />
<div id="google_translate_element"></div>
);
}
}

export default GoogleTranslate;

Adminlogin.js:

import GoogleTranslate from '../Applicant/GoogleTranslate'; 

我通过使用 <GoogleTranslate /> 使用 Adminlogin.js 文件中包含的这个组件.

并将该组件包含在我的文件中,当我登录网站和注销后,当我导航到主页时,有两个语言栏。

/image/xLupf.png

感谢任何帮助。

最佳答案

在功能组件中试试这个效果很好

 const SamplePage = () => {

const googleTranslateElementInit = () => {
new window.google.translate.TranslateElement({ pageLanguage: 'en', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT }, 'google_translate_element')
}

useEffect(() => {
var addScript = document.createElement('script');
addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
document.body.appendChild(addScript);
window.googleTranslateElementInit = googleTranslateElementInit;
}, [])

return (
<div>
<h2 className="title gx-mb-4"><IntlMessages id="sidebar.samplePage"/></h2>
<div id="google_translate_element"></div>
<div className="gx-d-flex justify-content-center">
<h4>Start building your app. Happy Coding!</h4>
</div>

</div>
);
};

export default SamplePage

关于javascript - react js 谷歌翻译不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50298201/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com