NextJS 谷歌翻译小部件

Posted 2023-02-22

【中文标题】NextJS 谷歌翻译小部件

【英文标题】：NextJS Google Translate Widget

【发布时间】：2021-02-28 22:15:36

【问题描述】：

我有一个 NextJS 应用程序，我想将 Google 自动翻译小部件添加到我的应用程序中。

所以做了一个这样的函数：

function googleTranslateElementInit() 
    if (!window['google']) 
        console.log('script added');
        var script = document.createElement('SCRIPT');
        script.src =
            '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    

    setTimeout(() => 
        console.log('translation loaded');
        new window.google.translate.TranslateElement(
            
                pageLanguage: 'tr',
                includedLanguages: 'ar,en,es,jv,ko,pt,ru,zh-CN,tr',
                //layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                //autoDisplay: false,
            ,
            'google_translate_element'
        );
    , 500);

我在useEffect() 中调用此函数，它会加载，但当我路由到另一个页面时，它会消失。 当我检查控制台时，我看到translation loaded 所以每次都会调用setTimeout 范围，即使我路由到另一个页面但翻译小部件没有出现，只有在我刷新页面时才会出现。

我该如何解决这个问题？

【问题讨论】：

谷歌翻译不是停止了吗？ translate.google.com/intl/en/about/website

哦，看，这就是为什么我在谷歌文档上找不到任何有用信息的原因。感谢您提供的信息，我想我将配置 i18n，因为 Google 不是一个选项。

【参考方案1】：

感谢SILENT's 回复：Google no longer support this widget.

所以我要为 NextJS 配置 next-i18next，这是一个 i18n（具有动态 json 存储的轻量级翻译模块）。

另外，我认为这个小部件的问题是 Google 的 JS 代码将该小部件附加到 DOM 本身，因此它没有附加到 VirtualDOM，这就是为什么当我在应用程序中路由时，React 检查 VirtualDOM 并更新 DOM 本身所以小部件消失了，因为它不在 VirtualDOM 上。 （这只是猜测）