网站链接： 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;
我把你的代码放在沙箱里，它也可以在那里工作：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。这只是基于官方文档的猜测 [React] 与其他库集成。例如，这是他们在与jQuery选择的插件集成中所做的：
请注意我们如何将
<select>包装在一个额外的<div>中。这是必要的，因为 Chosen 将在我们传递给它的<select>节点之后附加另一个 DOM 元素。然而，就 React 而言，<div>总是只有一个孩子。这就是我们如何确保 React 更新不会与 Chosen 附加的额外 DOM 节点冲突。重要的是，如果你在 React 流程之外修改 DOM，你必须确保 React 没有理由接触这些 DOM 节点。
我相信我们这里也有类似的情况。也许将任何类型的属性放在包装器div 上(甚至是硬编码的id属性(都会把事情搞砸。
同样的问题。我通过添加这个来解决它：
{(typeof window != "undefined") && <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>}
希望它也对你有用。
杰罗姆