如何使用React和Material-UI嵌入Calendly Anchor标签

Question

我正在尝试使用Reacrjs和Material-UI嵌入Calendly的锚标记。

Calendly指令是：

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/bbb'});return false;"> Schedule Here</a>
<!-- Calendly link widget end -->

我试过这样做：

<Typography className={classes.root}>
    <Link href="#" onClick={Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
    </Link>
</Typography>

并在react应用程序的公共文件夹中的index.html上添加了说明中提到的脚本和链接标签

谢谢。

Answer 1

看起来您是在调用Calendly.initPopupWidget({url:'https://calendly.com/bbb'})，而不是将函数传递给onClick处理程序。这将使弹出窗口在呈现链接时出现，而不是在单击链接时出现。

您可以将onClick函数更改为以下内容以防止出现此问题：

​

<Link href="#" onClick={() => window.Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
</Link>

​

这将把对initPopupWidget的调用包装在一个匿名函数中，以便Calendly函数仅在单击链接时触发。