NextJS Google 翻译小部件

Question

我有一个 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 范围每次都被调用，即使我路由到另一个页面但翻译小部件没有出现，只在我刷新页面时出现。

我该如何解决这个问题？

Answer 1

感谢 SILENT's answer: Google no longer support this widget.

所以我要为 NextJS 配置 next-i18next which is a i18n（具有动态 json 存储的轻量级翻译模块）。

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

NextJS Google 翻译小部件

NextJS Google Translate Widget

reactjs

jsx

next.js

google-translate

google-translation-api