将谷歌翻译添加到React项目

Question

我正在尝试将谷歌翻译添加到我的项目中。我尝试将其添加到 useEffect

const googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement(
      {
        pageLanguage: "en",
        autoDisplay: false
      },
      "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 id="google_translate_element"></div>
    </>
  );  

并且反应仍然在屏幕上渲染它两次。我也尝试将其放入index.html，但是当我这样做时，当我调整屏幕大小或更改移动视图时，有时当我刚刚启动项目时，该div不断消失。当发生这种情况时，我必须刷新页面才能将其恢复。我只是想在屏幕上看到一个永久的 div :P 。如果您能提供帮助，我会很高兴。

Answer 1

希望你能找到答案，祝你好运。