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

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 应用的 public 文件夹中的 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 函数仅在单击链接时触发。