您需要创建一个不会重新呈现的容器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>
    );
  }
}

下面是使用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 }}
    />
  );
};

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

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%）

你可以使用这个包react-calendly，只需要传入calendly url

import { InlineWidget } from 'react-calendly';

const App = () => {
return <InlineWidget url="yourcalendlyurl"/>
}

export default App

你就可以走了。

结合@EricWallen使用React Hooks的答案和Ori Dori在componentWillUnmount中的清理建议。
如果你需要导航到不同的组件，并且你的日历只在第一次呈现时可见，这一点特别有用。添加这个代码片段可以解决这个问题。

import React, { useEffect } from 'react';

const calendlyWidgetScript = 'calendlyWidgetScript';
const calendarDivId = 'calendarForm';

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

    return () => {
      if (document.getElementById(calendlyWidgetScript) && head) {
        const script = document.getElementById(calendlyWidgetScript);
        script?.remove();
        const calendar = document.getElementById(calendarDivId);
        calendar?.remove();
    }
    }

  }, []);

  return (
  <div id={calendarDivId}>

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

工作Vue 3的例子，为那些寻找它：

<template>
    <div>
        <div class="calendly-inline-widget" data-url="YOUR_CALENDLY_URL_HERE" style="min-width: 320px; height: 630px"></div>
    </div>
</template>

<script setup lang="ts">
    onMounted(() => {
        const head = document.querySelector('head');
        const script = document.createElement('script');
        script.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js');
        head!.appendChild(script);
    });
</script>

<style scoped></style>

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

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;