javascript Reactjs谷歌翻译不工作

voase2hg 于 2023-01-11 发布在 Java

关注(0)|答案(6)|浏览(169)

在ReactJS试图实现谷歌翻译，并包括翻译组件在我的脚本文件.

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

我使用<GoogleTranslate />来使用Adminlogin.js文件中包含的此组件。
并包括在我的文件的组成部分，当我登录到网站和注销后，当我导航到主页，有两个语言栏。

任何帮助都很感激。

JavaScript

来源：https://stackoverflow.com/questions/50298201/react-js-google-translate-not-working

6条答案

按热度按时间

piok6c0g1#

在功能组件中尝试此操作，工作正常

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

赞(0）回复(0）举报 2023-01-11

cig3rfwq2#

语言栏的重复或倍增是由于每次加载/呈现页面时调用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;

如果这对你有用，请投赞成票。如果没用，请不要犹豫，留下评论。干杯！

赞(0）回复(0）举报 2023-01-11

6l7fqoea3#

因为在这个.googleTranslateElementInit上下文中找不到正确的。
您可以在构造函数中绑定函数：

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

或在类中使用箭头函数bind

googleTranslateElementInit = () => {
   ...
}

赞(0）回复(0）举报 2023-01-11

r55awzrz4#

function BlackNavBar() {
  const googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement({ pageLanguage: 'en', layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE }, '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 (
    <>
      <header id="header" className="black-header">
        <div className="container">
          <div className="d-flex align-items-center">
            <div className="logo">
              <a href="/" aria-label="Hub">
                <GoDaddyLogoBlack />
              </a>
            </div>
            <button
              className="navbar-toggler collapsed"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#headerMenu"
              aria-controls="headerMenu"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="menu-lines"></span>
            </button>
            <div className="header-menu">
              <div className="collapse navbar-collapse" id="headerMenu">
                <ul className="navbar-nav">                
                <div id="google_translate_element"></div>
                </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
    </>
  );
}

export default BlackNavBar;

赞(0）回复(0）举报 2023-01-11

dly7yett5#

对于Next.js

<Script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" onLoad={() => {
        const googleTranslateElementInit = () => {
            new window.google.translate.TranslateElement({ pageLanguage: 'en'} , 'google_translate_element')
        }
        window.googleTranslateElementInit = googleTranslateElementInit;
}}/>

赞(0）回复(0）举报 2023-01-11

jc3wubiy6#

saikrishna chowdhary解决方案为我工作

赞(0）回复(0）举报 2023-01-11