Calendly не появляется на сайте (сайт развернут с помощью Netlify)

Ссылка на сайт: 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;

person devkev1    schedule 04.02.2020    source источник
comment
Помог ли мой ответ?   -  person Dmitry Pashkevich    schedule 07.02.2020


Ответы (2)


Я поместил ваш код в песочницу, и там он тоже работает: 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. Это всего лишь предположение, основанное на официальной документации по интеграции [React] с другими библиотеками. . Например. это то, что они делают в Интеграция с Выбранный плагин jQuery:

Обратите внимание, как мы завернули <select> в дополнительный <div>. Это необходимо, потому что Chosen добавит еще один элемент DOM сразу после узла <select>, который мы ему передали. Однако, что касается React, у <div> всегда есть только один дочерний элемент. Таким образом мы гарантируем, что обновления React не будут конфликтовать с дополнительным узлом DOM, добавленным Chosen. Важно, чтобы, если вы изменяете DOM вне потока React, вы должны убедиться, что у React нет причин касаться этих узлов DOM.

Думаю, у нас аналогичная ситуация. Возможно, добавление свойства любого в div-оболочку (даже жестко запрограммированного свойства id) все испортит.

person Dmitry Pashkevich    schedule 05.02.2020

Та же проблема. Я решил это, добавив это:

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

Надеюсь, это сработает и для вас.

Джером

person Jérôme Celebi    schedule 06.01.2021