在 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 文件中包含的这个组件.
并将该组件包含在我的文件中,当我登录网站和注销后,当我导航到主页时,有两个语言栏。
感谢任何帮助。
最佳答案
在功能组件中试试这个效果很好
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/