将google translate脚本移到项目的根目录index.html。
但是，您应该将下面的代码保留在您想要的位置：

render() {
    return (
      <div id="google_translate_element"></div>
    );
  }

字符串
轻松解决问题。

将渲染更改为：

render() {
  return (
    <script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' />
    <div id="google_translate_element"></div>
  );
}

字符串
创建googleTranslateElementInit并使用window.google而不是google：

googleTranslateElementInit () {
  /* eslint-disable no-new */
  new window.google.translate.TranslateElement({pageLanguage: 'pt', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element')
}

型
将componentDidMount更改为：

componentDidMount () {
  window.googleTranslateElementInit = this.googleTranslateElementInit
}

型

对于那些在2021年，希望在谷歌决定改变实现方法之前的几年，这就是我解决它的方式。
将以下脚本添加到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.jsx来回答这个问题。
在新创建的组件中，粘贴以下代码：

import React, { useEffect } from "react";

const GoogleTranslate = () => {
  useEffect(() => {
    // in some cases, the google translate script adds a style to the opening html tag.
    // this added style disables scrolling.
    // the next 3 lines removes this added style in order to re-enable scrolling.
    if (window.document.scrollingElement.hasAttribute("style")) {
      window.document.scrollingElement.setAttribute("style", "");
    }
  });

  return (
    <div id="google_translate_element"></div>
  );
};

export default GoogleTranslate;

型
在您想要使用translate插件的任何地方导入组件。
如果这个解决方案对你有效，请投上一票，这样它就可以很容易地显示给其他搜索者。如果它不起作用，不要犹豫，留下评论

2023年底的答案。如果你想在React中使用Google翻译，使用TranslateElement。只要你附加了脚本和Google需要的元素，在哪里或何时将其添加到项目中就很重要。我用自定义钩子做了它：

function useGoogleTranslateScript() {
    useEffect(() => {
        const addScript = document.createElement('script');
        addScript.setAttribute(
            'src',
            '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'
        );
        document.body.appendChild(addScript);
        // debugger
        window.googleTranslateElementInit = () => {
            new window.google.translate.TranslateElement(
                {
                    pageLanguage: 'en',
                    includedLanguages: 'en,es',//here include all languages that you need
                },
                'google_translate_element'
            );
        };
    }, []);
}

字符串
你可以把钩子放在translate组件所在的位置。做更多的改进：你可以隐藏所有的Google组件，并自己处理cookie，确保你把googtranss的cookie修改为你在设置cookie时选择的语言：

export const setCookie = (cName, cValue, exDays) => {
    let d = new Date(),
        expires = exDays;
    if (typeof exDays === 'number') {
        d.setTime(d.getTime() + (exDays * 24 * 60 * 60 * 1000));
        expires = "expires=" + d.toUTCString();
    }
    document.cookie = cName + "=" + cValue + ";" + expires + ";path=/";
}

型
使用它：

setCookie('googtrans', `/en/${value}`, 'Session')
//important
window.location.reload()

型
别忘了重新加载位置。

转到公共文件夹> index.html
在主体标签中添加代码

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

字符串
创建组件

import React from 'react';
import './style.css';

const GoogleTranslate = (props) => {

    return(
        <div id="google_translate_element"></div>
    )
}

export default GoogleTranslate

型
从“./Google Translate”导入Google Translate;

<GoogleTranslate />

型