时间戳

首页 > 解决方案 > NextJS 谷歌翻译小部件

reactjs - NextJS 谷歌翻译小部件

问题描述

我有一个 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

我该如何解决这个问题？

标签： reactjsjsxnext.jsgoogle-translategoogle-translation-api

解决方案

感谢SILENT 的回答：谷歌不再支持这个小部件。

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

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

推荐阅读