javascript - 使用 Helmet 嵌入第三方聊天小部件

问题描述

我正在尝试在我的网站上嵌入一个tlk.io聊天小部件，Gatsby因为似乎不存在类似的插件。我正在使用react-helmet插件嵌入该脚本，但我的页面上没有显示任何内容。我的代码你可以在下面找到。

我认为这与脚本依赖data-channeldiv 标签中的这个属性有关，但我不知道该怎么做。

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const LivePage = () => (
    <Layout>
      <SEO title="Live" />
      <Helmet>
        <div id="tlkio"
          data-channel="hey"
          style={{width:'auto',
          height:400}}></div>
        <script src="http://tlk.io/embed.js" type="text/javascript"></script>
      </Helmet>
    </Layout>
)

export default LivePage

标签： javascriptreactjsjsxgatsbyreact-helmet

根据Gatsby 关于 Helmet 的文档，React Helmet <Helmet>组件允许您插入一些代码，这些代码将在编译后放置在<head>标签内。

因此，在您的代码中，您需要删除<div>标签，它会像魅力一样工作。

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const LivePage = () => (
    <Layout>
      <SEO title="Live" />
      <Helmet>
        <script src="https://tlk.io/embed.js" type="text/javascript"/>
      </Helmet>
    </Layout>
)

export default LivePage

我已经在我的本地机器上进行了测试，它可以完美地工作，如下面的屏幕截图所示：

javascript - 使用 Helmet 嵌入第三方聊天小部件

问题描述

解决方案

推荐阅读