如何在 React 中导入 Snipcart？

Question

我尝试在带有 React 的单个产品页面（如 here）中使用 snipcart。

使用下面的代码，单击按钮 (class="snipcart-add-item") 不会执行任何操作。我必须如何导入？

在我的版本中 "data-api-key" 当然是我正确的 snipcart api 键。

import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css"
import React from 'react';

function App() {
  return (
    <div className="App">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
      <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="API_KEY"></script>
      <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />

      <button
          class="snipcart-add-item"
          data-item-id="2"
          data-item-name="Bacon"
          data-item-price="3.00"
          data-item-weight="20"
          data-item-url="http://myapp.com/products/bacon"
          data-item-description="Some fresh bacon">
              Buy bacon
      </button>

    </div>
  );
}

export default App;

Answer 1

转到 public/index.html 并将您的脚本和 link 粘贴到 head

如何在 React 中导入 Snipcart？

How to import Snipcart in React?

import

reactjs

snipcart