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

Question

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

对我遗漏的东西有什么想法吗？

Answer 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> 中。

在我的代码片段中使用 gatsby build：

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

Adding script tag to Gatsby using helmet throws syntax errors

javascript

reactjs

gatsby

ibm-watson