我正在尝试在Gatsby网站上嵌入tlk.io聊天小部件，因为似乎不存在类似的插件。我正在使用react-helmet插件来嵌入该脚本，但是页面上没有任何显示。您可以在下面找到我的代码。
我认为这与脚本依赖div标签中的data-channel属性有关，但是我不知道该怎么做。
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最佳答案
根据Gatsby documentation about 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 - 使用 Helm 嵌入第三方聊天小部件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60794195/