1

网站链接：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;
4

2 回答 2

1

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

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

我不确定为什么 React 有理由重新渲染 Calendly 组件，但这是我会尝试的：

  • 将 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>
  );
}

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

注意我们是如何包裹<select>在一个额外的<div>. <select>这是必要的，因为 Chosen 将在我们传递给它的节点之后附加另一个 DOM 元素。然而，就 React 而言，<div>总是只有一个孩子。这就是我们确保 React 更新不会与 Chosen 附加的额外 DOM 节点冲突的方式。重要的是，如果您在 React 流程之外修改 DOM，则必须确保 React 没有理由接触那些 DOM 节点。

我相信我们这里也有类似的情况。也许在包装器 div 上放置任何类型的属性（甚至是硬编码的id属性）都会使事情变得混乱。

于 2020-02-05T21:14:20.603 回答
0

同样的问题。我通过添加这个来解决它：

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

希望它也对你有用。

杰罗姆

于 2021-01-06T09:25:28.103 回答