logo标签列表

使用Helmet将脚本标签添加到Gatsby会出现语法错误

javascriptreactjsgatsbyibm-watson
3

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

我遇到了编译错误。我甚至尝试将代码用 {} 包装在 script 标签中，但仍然没有成功。
<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>

有没有关于我漏掉了什么的想法？
你遇到了哪些错误？ - Chris
表达式期望，意外的标记。你是不是想说{'}'}或者&rbrace;？ - Link
这是你在第一个示例还是第二个示例中遇到的错误？我需要知道你在第一个示例中遇到的错误，因为你不应该需要将其包装在花括号中。 - Chris
对于第一个例子，我遇到了语法错误。我在帖子中添加了一张照片，这样你就可以看到它在我的编辑器中的样子。 - Link
每个页面我都包含了一个组件。我想先让它以任何方式工作。 - Link
1
我所找到的唯一方法是使用"Gatsby"网站上提到的"dangerouslySetInnerHtml"。你可以在这个页面底部找到它。 - Chris
1个回答
2

当您将大括号 ({}) 包裹在组件中时，需要在其中使用反引号 (`)：

<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： enter image description here
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接