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;
最佳答案
您需要创建一个不会重新渲染的容器 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>
);
}
}
关于javascript - 将 Calendly 嵌入到 React 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53891698/