javascript - 使用谷歌翻译为 React js 制作站点多语言支持

Question

对于简单的 html 项目，我可以简单地引用此链接。

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

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

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>
    );
  }

轻松解决问题。