使用谷歌翻译为 React js 制作网站多语言支持答案

【问题标题】：Making site multi language support using google translate for React js使用谷歌翻译为 React js 制作网站多语言支持
【发布时间】：2017-05-22 16:46:03
【问题描述】：

对于简单的 html 项目，我可以简单地参考这个链接。

https://www.w3schools.com/howto/howto_google_translate.asp

但我正在尝试在 react app 中实现。所以我无法在反应应用程序中复制代码。

componentDidMount() {
  googleTranslateElementInit(() => {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    });
    const script = document.createElement("script");
    script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    script.async = true;
    document.body.appendChild(script);
}

并返回渲染元素。

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

这向我显示错误说 google ， googleTranslateElementInit 未定义。

如何在 react 应用中使用谷歌翻译？还有可以翻译整个网站的 npm 包吗？

谢谢

【问题讨论】：

标签： javascript reactjs google-translate

【解决方案1】：

将您的谷歌翻译脚本移动到您项目的根index.html。

但是，您应该将以下代码留在您想要的位置：

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

轻松解决问题。

【讨论】：

这个答案让我很开心:)
这对我不起作用。 2021 年有什么解决方案吗？

【解决方案2】：

将渲染更改为：

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
}

【讨论】：

【解决方案3】：

对于那些在 2021 年以及希望在 Google 决定更改实施方法之前再过几年的人，我就是这样解决它的。

将以下脚本添加到您在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;

在任何你想使用翻译插件的地方导入组件。

如果此解决方案对您有用，请投票，以便可以轻松地向其他搜索者展示。如果没有，请不要犹豫，发表评论

【讨论】：

好的，所以我完全复制了这个，然后在我的导航栏中导入了组件，但它没有加载谷歌用户界面。我在源和网络选项卡中看到脚本，甚至添加了一个 div，但没有添加任何谷歌翻译 ui。
我也注意到有时 Google 翻译 UI 不显示。如果您启用了 Adblocker，有时它会干扰。您可以执行以下操作：1. 重新加载页面以查看是否出现，或 2. 禁用 Adblocker 并重新加载

【解决方案4】：

转到公用文件夹> index.html

在body标签中添加代码

<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

从“./GoogleTranslate”导入谷歌翻译；

<GoogleTranslate />

【讨论】：