Javascript 谷歌翻译不起作用

在React中，JS试图实现google translate，并在我的脚本文件中包含了translate组件

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;

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

我正在使用Adminlogin.js文件中包含的这个组件

并且在我的文件中包含了这个组件，当我登录到这个网站和注销后，当我导航到主页时，有两个语言栏

---

非常感谢您的帮助。

因为在这个.googleTranslateElementInit上下文中找不到正确的答案

您可以在构造函数绑定函数中：

constructor(props) {
    super(props);
    this.googleTranslateElementInit = this.googleTranslateElementInit.bind(this);
}

或 在类中使用arrow函数bind

googleTranslateElementInit = () => {
   ...
}

---

在功能组件中尝试此功能很好

 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

const SamplePage=（）=>{
const googleTranslateElementInit=（）=>{
新建window.google.translate.TranslateElement（{pageLanguage:'en'，布局：window.google.translate.TranslateElement.FloatPosition.TOP_LEFT}，'google_translate_element'）
}
useffect（（）=>{
var addScript=document.createElement（'script'）；
addScript.setAttribute（'src'，'//translate.google.com/translate_a/element.js？cb=googleTranslateElementInit'）；
document.body.appendChild（addScript）；
window.googleTranslateElementInit=googleTranslateElementInit；
}, [])
返回(
开始构建你的应用程序。快乐编码！
);
};
导出默认样本页