我想在我的盖茨比网站上添加一个google翻译元素。实际上，我试图让下面的代码在Gatsby中工作:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
我对盖茨比比较陌生，想知道如何正确地(或至少是可行的)实现这一目标。
What I have try
- 在mount 上调用Javascript代码
const Footer = () => {
useEffect(() => {
const script = document.createElement("script")
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
script.async = true
document.body.appendChild(script)
googleTranslateElementInit(() => {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element')
})
return () => {
document.body.removeChild(script)
}
}, [])
return <div id="google_translate_element"></div>
}
此操作无效，因为googleTranslateElementInit和google未定义。
- 将
<script移动到<Helmet>组件
<Helmet>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
{googleTranslateElementInit(() => {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element')
})}
</script>
</Helmet>
产生与(1)
相同的错误- 将Javascript添加到
html.js的<body>标签的开始
<body {...props.bodyAttributes}>
<script
dangerouslySetInnerHTML={{
__html: `
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
`
}}
/>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
这是我第一次加载网站。刷新后，按钮消失了。它只在我启动开发服务器后第一次加载页面时出现。我也试着做了一个生产构建相同的结果。
我已经被这个问题困扰了很长时间，我将非常感谢任何建议。
我使用了以下方法:
const GoogleTranslate = () => {
const googleTranslateElementInit = () => {
new window.google.translate.TranslateElement({ pageLanguage: 'en', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT }, 'google_translate_element')
}
useEffect(() => {
var addScript = document.createElement('script');
addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
document.body.appendChild(addScript);
window.googleTranslateElementInit = googleTranslateElementInit;
}, []);
return (
<>
<div id="google_translate_element"></div>
</>
);
}
export default GoogleTranslate
看起来你没有使用基于react的方法，所以你的翻译脚本总是缺乏作用域(它将异步加载或者它永远不会按需加载)。我的建议是使用react依赖，比如react-google-translate，此外，clean会更干净。
一旦你设置了你的环境(环境变量等等)，你只需要:
import React, { useState, useEffect } from 'react'
import { useLazyTranslate } from 'react-google-translate'
const Example = () => {
const [text] = useState('test');
const [language] = useState('zh-CN');
const [translate, { data, loading }] = useLazyTranslate({
language
})
useEffect(() => {
if (text) {
translate(text, language);
}
}, [translate, text])
render() {
return (
<div>{loading ? 'Loading...' : data}</div>
)
}
}
正如您所看到的，有一些自定义钩子(useLazyTranslate)允许您按需使用转换，确保库被正确加载。