Question

对于简单的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>
    );
  }

这显示我说谷歌的错误，未定义googleTranslateElementInit。

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

由于

Answer 1

将您的Google翻译脚本移至项目的根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

在正文标签中添加代码

<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 />

使用谷歌翻译为React js提供站点多语言支持

3 个答案: