使用谷歌翻譯為 React js 制作網站多語言支持

Question

對於簡單的 html 項目，我可以簡單地參考這個鏈接。

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

但我正在嘗試在 react app 中實現。 所以我無法在 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 包嗎？

謝謝

Answer 1

將您的谷歌翻譯腳本移動到您項目的根index.html 。

但是，您應該將以下代碼留在您想要的位置：

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

輕松解決問題。

Answer 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
}

Answer 3

轉到公共文件夾> 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；

<GoogleTranslate />