将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

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

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。另外，您可以更好地控制样式（我发现在其他解决方案中，嵌入式日历出于某种原因只有 150 像素的高度，即使容器更大并且 iFrame 设置为 100%）

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

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

这是呈现目标div的简单组件（未经测试）。在componentDidMount()其中生成script标记，并将其添加到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 4

将脚本文件本身粘贴</body>在index.html中的标记之前

import React, { Component} from "react";

class Calendly extends Component {
  ComponentDidMount( )

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

export default Calendly;