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

Question

我正在尝试使用 Reacrjs 和 Material-UI 嵌入 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 app的public文件夹中的index.html上添加了说明中提到的script和link标签

谢谢。

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 函数只会在单击链接时触发。