时间戳

首页 > 解决方案 > 反应js谷歌翻译不起作用

javascript - 反应js谷歌翻译不起作用

问题描述

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

谷歌翻译.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;

管理员登录.js：

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

我正在使用 Adminlogin.js 文件中包含的这个组件<GoogleTranslate />。

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

https://i.stack.imgur.com/xLupf.png

任何帮助表示赞赏。

标签： javascriptreactjsgoogle-translate

解决方案

语言栏的重复或乘法是document.body.appendChild(addScript)每次页面加载/呈现时调用的结果。

要解决此问题，请将插件初始化添加到您的public > index.html文件中，如下所示：

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement(
        {
          pageLanguage: "en",
          layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
        }, 
        'google_translate_element'
      );
    }
  </script>

然后，将您的GoogleTranslate组件更改为

import React, { Component } from 'react';

class GoogleTranslate extends Component {
    render() {
        return (
            <div id="google_translate_element"></div>
          );
     }
}

export default GoogleTranslate;

如果这对您有用，请投票。如果没有，请不要犹豫发表评论。干杯!

推荐阅读