Question

我有一个简单的组件可以呈现嵌入式Calendly应用程序：

class BookAppointment extends Component {

    render(){      
        const data_url = `https://calendly.com/username?name=${this.props.firstName}%20${this.props.lastName}&email=${this.props.email}`
        return (
            <div class="calendly-inline-widget" data-url={data_url} style={{"min-width":"320px","height":"780px"}} />
        );
    }
}

但是，仅当我直接导航到此路线（通过输入url）时，才会显示Calendly小部件。如果我通过单击NavBar链接并让我的react-router-dom路由到这里，它不会加载。为什么会这样呢？

Answer 1

我以前将脚本文件放在<head>文件的index.html中。不幸的是，要解决此问题，我不得不直接修改DOM，并在组件安装和卸载时动态地添加和删除小部件：

.
.
.
    componentDidMount() {
        const head = document.querySelector('head');
        const script = document.createElement('script');
        script.id = "calendly-widget";
        script.setAttribute('src',  'https://assets.calendly.com/assets/external/widget.js');
        head.appendChild(script);
    }

    componentWillUnmount() {
        const calendlyWidget = document.getElementById("calendly-widget");
        const head = document.querySelector("head");
        head.removeChild(calendlyWidget);
    }

我不确定为什么要这么做。如果有人可以对此原因发表评论，我认为这将为其他人提高此答案的质量。

React仅在直接导航时呈现嵌入式应用程序，而不在路由到页面时呈现

1 个答案: