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

2022-03-30 00:00:00 reactjs javascript gatsby ibm-watson

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

相关文章