使用google翻译实现对网站多语言的支持
使用google翻译实现对网站多语言的支持
提问于 2017-05-22 16:46:03
对于简单的html项目，我可以简单地参考这个链接。
但我正在尝试在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>
);
}这表明我错说谷歌，googleTranslateElementInit是没有定义的。
如何在react应用程序中使用谷歌翻译？还有什么npm包可以翻译整个网站吗？
谢谢
回答 4
Stack Overflow用户
发布于 2017-11-14 22:29:39
将您的google翻译脚本移动到项目的根index.html。
但是，您应该将下面的代码留在您想要的位置：
render() {
return (
<div id="google_translate_element"></div>
);
}很容易解决这个问题。
Stack Overflow用户
发布于 2018-03-29 09:54:51
将呈现更改为：
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
}Stack Overflow用户
发布于 2021-09-13 01:08:34
对于那些在2021年，希望在谷歌决定改变实现方法之前的几年，我就是这样解决的。
将以下脚本添加到在index.html目录中找到的public文件中：
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: "en",
layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
},
'google_translate_element'
);
}
</script>然后，创建一个组件，在您想要使用翻译插件的任何地方导入，并使用您选择的任何名称。为了这个答案，我将使用GoogleTranslate.jsx。
在新创建的组件中，粘贴以下代码：
import React, { useEffect } from "react";
const GoogleTranslate = () => {
useEffect(() => {
// in some cases, the google translate script adds a style to the opening html tag.
// this added style disables scrolling.
// the next 3 lines removes this added style in order to re-enable scrolling.
if (window.document.scrollingElement.hasAttribute("style")) {
window.document.scrollingElement.setAttribute("style", "");
}
});
return (
<div id="google_translate_element"></div>
);
};
export default GoogleTranslate;在您想要使用翻译插件的地方导入组件。
如果这个解决方案对你有用，请投一票，这样它就可以很容易地展示给其他搜索者。如果没有，请不要犹豫放弃评论
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44118170
复制相关文章
相似问题
腾讯云开发者
