React Calendly 包无限加载

Question

我目前正在使用 react-calendly 包，一切都按预期工作。我可以选择日期等，并将事件 post 添加到日历中。唯一的问题是日历下方有 3 个灰点，显示小部件正在加载。它们永远不会消失，小部件似乎处于持续加载状态。发生这种情况有原因吗？或者也许可以提供一个单独的解决方案，而不是我正在使用的包。点击https://m44fc.csb.app/ to see what I am talking about. Here is the code pen if you would like to test a solution 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

我需要做些什么来解决这些问题吗？

Answer 1

看起来 React 组件缺少一个重要的样式属性。我们会考虑对其进行修补，但与此同时，解决方法是在您使用该组件时自行传递以下样式：

<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。这应该确保小部件始终覆盖加载点，无论页面大小是多少。

React Calendly 包无限加载

React Calendly Package infinitely loading

reactjs

calendly