我正在尝试将 watson 聊天机器人添加到我的网站，所需的脚本标签如下:
<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用我的片段:
关于javascript - 使用 Helm 向 Gatsby 添加脚本标签会引发语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63494846/