我在我的 React 组件中使用了 calendly API
我尝试过这段代码:
import React, { Component } from 'react'
import FullScreenModal from '../../../UIComponents/FullScreenModal'
export default class MeetingBooking extends Component {
state={
isLoading: false
}
componentDidMount() {
console.log(this.state.isLoading)
const head = document.querySelector('head');
const script = document.createElement('script');
script.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js');
head.appendChild(script);
this.setState({loading: false})
}
render() {
console.log(this.state.isLoading)
return (
<FullScreenModal open={this.props.open} title={"Book a Meeting"} handleClose={this.props.handleClose}>
{this.state.isLoading ?
<p>Loading...!!!!</p> :
<div
className="calendly-inline-widget"
data-url="https://calendly.com/kristofferlocktolboll"
style={{minWidth: '320px', height: '580px'}}>
</div>
}
</FullScreenModal>
)
}
}
问题是我无法像使用 Axios
那样等待来自 URL 的请求。或fetch API
请求,因此每当插入脚本时,甚至不会显示加载组件。
所以我正在寻找某种方法来监听注入(inject)的 JavaScript,并等待它,这样我就可以显示我的 <p>Loading....!!!!</p>
同时,这可以实现吗?
最佳答案
您可以添加load
<script>
的事件监听器元素,这是一个示例:
export default class MeetingBooking extends Component {
state = {
isLoading: false
}
componentDidMount() {
this.setState({ isLoading: true }, () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.onload = () => this.setState({ isLoading: false });
script.src = 'https://assets.calendly.com/assets/external/widget.js';
document.head.appendChild(script);
});
}
}
关于javascript - 在 react 组件内等待来自非 react 源的请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57101460/