反应Calendly包裹无限加载

问题描述

我当前正在使用react-calendly程序包，并且一切正常。我可以选择一个日期等并将事件发布到日历上。唯一的问题是在日历下方，有3个灰色的点表示正在加载小部件。它们永远不会消失，小部件似乎处于恒定的加载状态。是否有发生这种情况的原因？也许可以提供与我使用的软件包不同的单独解决方案。单击https://m44fc.csb.app/以查看我在说什么。如果您想测试解决方案https://codesandbox.io/s/dreamy-dewdney-m44fc?file=/src/App.js

，请使用以下代码笔

我的代码如下：

import React,{ useState } from 'react'
import { InlineWidget } from 'react-calendly'

function App() {
  return (
    <>
      <InlineWidget
        url='https://calendly.com/myURL'
        utm={{
          utmCampaign: 'Spring Sale 2019',utmContent: 'Shoe and Shirts',utmMedium: 'Ad',utmSource: 'Facebook',utmTerm: 'Spring'
        }}
      />
    </>
  )
}

export default App

在我的chrome开发工具中遇到以下问题：

通过更新cookie的属性来解决此问题： 如果要在跨站点上下文中设置cookie，请指定SameSite = None和Secure。请注意，只有通过HTTPS发送的cookie才能使用Secure属性。 如果不应通过跨站点请求设置cookie，请指定SameSite = Strict或SameSite = Lax

我需要解决这些问题吗？

解决方法

看起来像React组件缺少重要的style属性。我们将研究打补丁，但与此同时，解决方法是在使用组件时自行传递以下样式：

<InlineWidget
    url="https://calendly.com/robert-612/complimentary-consultation"
    utm={{
      utmCampaign: "Spring Sale 2019",utmContent: "Shoe and Shirts",utmMedium: "Ad",utmSource: "Facebook",utmTerm: "Spring"
    }}
    styles={{
      minWidth: "320px",height: '630px',position: 'relative',}}
  />  

minWidth和height的值取自component's defaults，缺少的position: relative。无论页面大小如何，这都应确保小部件始终覆盖加载点。