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重新渲染了您的组件，当它重新发布时，它从{ {1}}，因为它不了解它们。

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

将Calendly组件更改为.calendly-inline-widget或更好的功能组件
让组件呈现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"，只需去除该id属性并避免额外的嵌套div。这只是基于Integrating [React] with Other Libraries上官方文档的猜测。例如。这就是他们在Integrating with jQuery Chosen Plugin中所做的事情：

请注意我们如何将div包装在额外的<select>中。这是必要的，因为选择的对象将在我们传递给它的<div>节点之后追加另一个DOM元素。但是，就React而言，<select>始终只有一个孩子。这样我们可以确保React更新不会与选择的附加DOM节点冲突。重要的是，如果您在React流之外修改DOM，则必须确保React没有理由接触这些DOM节点。

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

Answer 2

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

File::delete(public_path('Qrs.zip'));

希望它也适用于您。

杰罗姆

意外地不在站点上显示（站点已与Netlify一起部署）

2 个答案: