Calendly未出现在站点上(站点已使用Netlify部署)

Question

网站链接：https://zen-stonebraker-8640d3.netlify.com/

我不知道是什么问题，如果你点击网站链接并查看，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;

Answer 1

我把你的代码放在沙箱里，它也可以在那里工作：https://codesandbox.io/s/stupefied-shamir-u5rx0

我在你的网站上调试了代码，看起来Calendly的小部件代码成功地将iframe附加到了.calendly-inline-widget中，但不久之后，React重新呈现了你的组件，当它这样做时，它会从.calendly-inline-widget中删除所有子组件，因为它不知道它们。

我不太确定为什么React会有理由重新呈现Calendly组件，但以下是我会尝试的：

• 将日历组件更改为React.PureComponent或更好的功能组件
• 使组件呈现不包含小部件的属性的div，如下面的

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

或者，如果您不需要在已有的div上使用id="schedule_form"，只需去掉该id属性并避免额外的嵌套div。这只是基于Integrating [React] with Other Libraries官方文档的猜测。这就是他们在Integrating with jQuery Chosen Plugin中做的事情

注意到我们是如何将<select>包装在额外的<div>中的。这是必要的，因为necessary将在我们传递给它的<select>节点后面追加另一个DOM元素。然而，就React而言，<div>始终只有一个子级。这就是我们如何确保React更新不会与appended附加的额外DOM节点冲突。如果在React流之外修改DOM，必须确保React没有理由接触那些DOM节点，这一点很重要。

我相信我们这里也有类似的情况。也许在包装器div上放任何类型的属性(甚至是硬编码的id属性)都会把事情搞得一团糟。

Answer 2

同样的问题。我通过添加以下内容解决了这个问题：

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

希望它也能为你工作。

杰罗姆