将Calendly嵌入React

Question

Calendly提供了这个嵌入代码，它被添加到页面并显示可供选择的日历选项。

<div class="calendly-inline-widget" data-url="https://calendly.com/username" style="min-width:320px;height:580px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

我想不出将这些代码嵌入到组件中的方法。在这里最好的方法是什么？

import React, { Component} from "react";

class Calendly extends Component {
  ComponentDidMount( )

  render(){
    return (
      <div>
        <div id="schedule_form">

        </div>
      </div>
    );
  }
};

export default Calendly;

Answer 1

您需要创建一个不会重新呈现的容器DOM元素，并且需要在DOM节点存在后加载脚本。

这是一个呈现目标div的简单组件(未经过测试)。在componentDidMount()中，它生成脚本标记，并将其添加到页面的head元素中。您应该在componentWillUnmount()中清除小部件，以便组件可以在需要时自行删除。

class Calendly extends React.Component {
  componentDidMount() {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src',  'https://assets.calendly.com/assets/external/widget.js');
    head.appendChild(script);
  }

  componentWillUnmount() {
    // whatever you need to cleanup the widgets code
  }

  render(){
    return (
      <div>
        <div id="schedule_form">
          <div 
            className="calendly-inline-widget"
            data-url="https://calendly.com/username"
            style={{ minWidth: '320px', height: '580px' }} />
        </div>
      </div>
    );
  }
}

Answer 2

这是如何使用React钩子来实现的：

import React, { useEffect } from 'react';

const Calendly = ({ minWidth, height, url }) => {
  useEffect(() => {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute(
      'src',
      'https://assets.calendly.com/assets/external/widget.js'
    );
    head.appendChild(script);
  }, []);

  return (
    <div
      className="calendly-inline-widget"
      data-url={url}
      style={{ minWidth, height }}
    />
  );
};

Answer 3

建议的，可能更简单的替代方案：

import React from 'react';

const Calendly = () => {
  return (
    <div style={{ height: "800px" }}>
      <iframe
        src="https://calendly.com/{USERNAME}/{OPTIONALEVENTNAME}"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
  );
};

export default Calendly;

根据需要调整高度(虽然我发现800px是很好的)。最终，他们提供的脚本无论如何都会创建一个iFrame，最好跳过整个步骤，直接加载iFrame。此外，您可以更好地控制样式(我发现使用其他解决方案时，由于某种原因，嵌入式日历的高度仅为150px，即使容器更大且iFrame设置为100%)。