Reactjs Calndly不出现在站点上（站点使用Netlify部署）

网站链接：

我不知道问题是什么，如果你点击网站链接查看，Calendly不会出现在网站上。我不确定这是我的代码的问题还是Netlify的部署问题。小部件在生产期间出现在我的本地主机上，但在部署期间不显示。请帮忙

import React from 'react';

class Calendly extends React.Component {
  calendlyScriptSrc = 'https://assets.calendly.com/assets/external/widget.js';

  componentDidMount() {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src', this.calendlyScriptSrc);
    head.appendChild(script);
  }

  componentWillUnmount() {
    const head = document.querySelector('head');
    const script = document.querySelector('script');
    head.removeChild(script);
  }
  render() {
    return (
      <div id="schedule_form">
        <div
          className="calendly-inline-widget"
          data-url="https://calendly.com/handofgravity"
          style={{ minWidth: '480px', height: '640px' }}
        />
      </div>
    );
  }
}

export default Calendly;

从“React”导入React；
类可滚动地扩展React.Component{
calendlyScriptSrc=https://assets.calendly.com/assets/external/widget.js';
componentDidMount（）{
const head=document.querySelector（'head'）；
const script=document.createElement（'script'）；
script.setAttribute（'src'，this.calendlyScriptSrc）；
head.appendChild（脚本）；
}
组件将卸载（）{
const head=document.querySelector（'head'）；
const script=document.querySelector（'script'）；
head.removeChild（脚本）；
}
render（）{
返回(
);
}
}
滚动导出默认值；

我将您的代码放在沙箱中，它也在沙箱中工作：

我在你的网站上调试了代码，看起来Calendly的小部件代码成功地向

.Calendly inline widget

添加了一个iframe，但在那之后不久，React重新呈现了你的组件，当它这样做时，它会删除

.Calendly inline widget

中的所有子部件，因为它不知道它们

我不确定React为什么会有理由重新渲染Calendally组件，但以下是我将尝试的内容：

• 将Calendly组件更改为

  React.PureComponent

  或更好的功能组件
• 让组件呈现一个不包含小部件的属性的

  div

  ，如下所示

render（）{
返回(
);
}

或者，如果您不需要已有的

div

上的

id=“schedule\u form”

，只需去掉该id属性并避免额外的嵌套div。这只是基于上的官方文档的猜测。例如，这就是他们的工作：

注意我们是如何将

包装在一个额外的

中的。这是必要的，因为Selected将在我们传递给它的

节点之后追加另一个DOM元素。但是，就React而言，

始终只有一个子项。这就是我们如何确保React更新不会与SELECT附加的额外DOM节点冲突的方法。重要的是，如果在React流之外修改DOM，则必须确保React没有理由接触这些DOM节点

---

我相信我们这里也有类似的情况。也许在包装器div上放置任何类型的属性（即使是硬编码的

id

属性）都会把事情搞砸。

同样的问题。我通过添加以下内容来解决此问题：

{(typeof window != "undefined") && <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>}

{（窗口类型！=“未定义”）&&}

希望它对你也有用

---

杰罗姆

我的回答有用吗？

{(typeof window != "undefined") && <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>}