问题描述
我正在将 Gatsby 与 React 结合使用,并且正在尝试实施 Calendly 预订系统。它有点工作。问题是在第一次加载时它给了我错误
TypeError: Cannot read property 'initInlineWidget' of undefined
在这里看到
如果我刷新页面,Calendly 对象加载并呈现就好了。
我想知道是否可以在 useEffect 中做些什么来避免这个问题。
import React,{ useEffect } from "react"
import Layout from "../components/layout"
const Calendly = styled.div`
height: 800px;
margin-top: 100px;
`
const IndexPage = ({ data }) => {
useEffect(() => {
window.Calendly.initInlineWidget({
url: "https://calendly.com/absolute-hardwood",parentElement: document.getElementById("bookingjs"),prefill: {},utm: {},})
},[])
return (
<Layout>
<Calendly id="bookingjs" />
</Layout>
)
}
export default IndexPage
这是我在 gatsby-confing.js
中添加 Calendly 脚本的方法
{
resolve: "gatsby-plugin-load-script",options: {
src: "https://assets.calendly.com/assets/external/widget.js",},}
解决方法
来自 Calendly 的 Marshall。由于您使用的是 React 和 Gatsby,因此您可以使用 react-calendly 包来加载您网站上的内嵌嵌入。
您需要在项目中安装 react-calendly 包,然后像这样在文件顶部导入 InlineWidget:
import { InlineWidget } from "react-calendly";
然后,您可以在您的页面上使用该组件:
<InlineWidget url="https://calendly.com/your_scheduling_page" />
我希望这会有所帮助!可以在 the package readme on Github 中找到更多文档。