Календарно не отображается на сайте (сайт развернут с Netlify) - PullRequest
Новая
       33

Календарно не отображается на сайте (сайт развернут с Netlify)

1 голос
/ 05 февраля 2020

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

1 Ответ

1 голос
/ 06 февраля 2020

Я поместил ваш код в песочницу, и он тоже там работает: 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 свойство) приводит к путанице.

...