使用头盔向Gatsby添加脚本标记引发语法错误
我正在尝试将Watson Chatbot添加到我的网站，所需的脚本标记如下：
<script>
window.watsonAssistantChatOptions = {
integrationID: "", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "", // The ID of your service instance.
onLoad: function(instance) { instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
document.head.appendChild(t);
});
</script>
以下是我的代码：
import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
function Watson() {
return (
<Helmet>
<script>
window.watsonAssistantChatOptions = {
integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
onLoad: function(instance) { instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
document.head.appendChild(t);
});
</script>
</Helmet>
)
}
export default Watson
我收到编译错误。我甚至尝试过用{}将代码包装在脚本中，但仍然没有成功：
<Helmet>
<script>
{
window.watsonAssistantChatOptions = {
integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
onLoad: function(instance) { instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
document.head.appendChild(t);
});
}
</script>
</Helmet>
对我错过的内容有什么想法吗？
解决方案
组件用花括号({})括起来时，需要在组件内部使用反号(`)：
<Helmet>
<script type='text/javascript'>
{` window.watsonAssistantChatOptions = {
integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
onLoad: function(instance) { instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
document.head.appendChild(t);
});
`}
</script>
</Helmet>
使用上面的代码片段，您的代码将被粘贴为原始字符串，但由于位于<script>标记中，它将被解释并作为公共脚本粘贴到<head>中。
对我的代码段使用gatsby build：