javascript - 将 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() 中，它生成 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>
    );
  }
}