使用头盔向 Gatsby 添加脚本标签会引发语法错误

IT技术 javascript reactjs gatsby ibm-watson
2021-05-07 21:58:12

我正在尝试将 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>

关于我缺少什么的任何想法?

1个回答

`当组件被花括号 ( {})包裹时,您需要在组件内使用反引号( ):

<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>作为通用脚本粘贴到您的代码中。

将 agatsby build与我的片段一起使用

在此处输入图片说明