window.Calendly.initInlineWidget不是在第一次加载时定义的，而是在React和Gatsby中使用useEffect刷新后工作的。

Question

我正在使用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",
      },
    }

Answer 1

这里是从Calendly来的。因为您使用的是React和Gatsby，所以可以使用反应时间包将内联嵌入加载到站点上。

您需要在项目中安装反应时间包，然后像这样在文件顶部导入InlineWidget：

import { InlineWidget } from "react-calendly";

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

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

我希望这能帮到你!进一步的文档可以在Github的包装自述中找到。