如何使用 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 apppublic文件夹public中添加了index.html说明中提到的脚本和link标签

谢谢。

Answer 1

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

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

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

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

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

How to embed Calendly Anchor Tag With React and Material-UI

calendar

reactjs

material-ui

calendly