Question

日历提供的嵌入代码会添加到页面中，并显示日历选项供您选择。

<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

这是使用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 2

您需要创建一个不会重新渲染的容器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 3

将脚本文件本身粘贴在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;

Answer 4

建议的方法，可能更简单：

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

将Calendly嵌入到React中

4 个答案: