0

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

    {
      resolve: "gatsby-plugin-load-script",
      options: {
        src: "https://assets.calendly.com/assets/external/widget.js",
      },
    }
4

1 回答 1

1

马歇尔从卡兰德利来。由于您使用的是 React 和 Gatsby，因此您可以使用react-calendly包将内联嵌入加载到您的网站上。

您需要在项目中安装react-calendly包，然后像这样在文件顶部导入InlineWidget ：

import { InlineWidget } from "react-calendly";

然后，您可以在页面上使用该组件：

<InlineWidget url="https://calendly.com/your_scheduling_page" />

我希望这有帮助！更多文档可以在 Github 上的包自述文件中找到。

于 2021-05-19T18:41:09.007 回答