React/JSX 如何使用 Eventbrite 的嵌入式小部件？

Question

EventBrite 的弹出窗口小部件与 React / JSX / GatsbyJs 不兼容。寻求有关如何在 Gatsby 站点上适当地实现它的帮助。如果你以前做过，你做了什么？这是他们给出的代码：

<button id="example-widget-trigger" type="button">Buy Tickets</button>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
  var exampleCallback = function() {
    console.log("Order complete!");
  };

  window.EBWidgets.createWidget({
    widgetType: "checkout",
    eventId: "52766401728",
    modal: true,
    modalTriggerElementId: "example-widget-trigger",
    onOrderComplete: exampleCallback
  });
</script>

Answer 1

第一个运行命令 cp .cache/default-html.js src/html.js 在终端的 gatsby 项目的根目录中

它将获得对 html.js 文件的访问权限。你可以把你需要的代码放在那里：

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script
    dangerouslySetInnerHTML={{
        __html: `
            var exampleCallback = function() {
              console.log("Order complete!");
            };

            window.EBWidgets.createWidget({
              widgetType: "checkout",
              eventId: "52766401728",
              modal: true,
              modalTriggerElementId: "example-widget-trigger",
              onOrderComplete: exampleCallback
            });
        `
    }}
/>

React/JSX 如何使用 Eventbrite 的嵌入式小部件？

How to use Eventbrite's Embedded Widget with React/JSX?

reactjs

jsx

gatsby

eventbrite