时间戳

首页 > 解决方案 > React 仅在直接导航时呈现嵌入式应用程序，而不是在路由到页面时

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

问题描述

我有一个呈现嵌入式 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路线导航到这里，它不会加载。为什么会这样？

标签： reactjs

解决方案

我之前将脚本文件放在了<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);
    }

我不太确定为什么我必须这样做。如果有人可以评论原因，我认为这将提高其他人的答案质量。

推荐阅读