реагировать JS Google переводчик не работает

Question

В 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;

Adminlogin.js :

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

Я использую этот компонентвключается в файл Adminlogin.js с помощью <GoogleTranslate />.

и включает компонент в мои файлы, когда я захожу на сайт и после выхода из системы, когда я перехожу на домашнюю страницу, есть две языковые панели.

Любая помощь приветствуется.

Answer 1

Потому что в контексте this.googleTranslateElementInit не удается найти правильное значение.

Вы можете в функции привязки конструктора:

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

или использовать функцию связывания стрелки в классе

googleTranslateElementInit = () => {
   ...
}

Надеюсь, это поможет вам:)