0

我对unpkg很陌生，我正在尝试弄清楚如何使用开源包中的组件。

我确实弄清楚了如何在我的 HTML 中使用unpkg来使用 ReactDOM。但我面临的问题是那些正在部署的自定义包。

就我而言，我正在尝试使用react-spring-3d-carousel-2，如果我们使用 react web-pack ，那么我们会像这样使用它。

import React, { useState, useEffect, useRef } from "react";
import Carousel from "react-spring-3d-carousel-2";


function Carousel3d() {
 

  return (
      <div className={styles.boxStyles}>
        <Carousel
          slides={...someSlides}
          goToSlide={..someSlide}
          offsetRadius={2}
          animationConfig={{ tension: 100, friction: 15 }}
          autoPlay={true}
          interval={4}
          opacity={1}
        />
      </div>

  );
}

export default Carousel3d;

在这种情况下，我们使用importand 但是在 HTML 中我们使用 cdn 并且不能使用import语句导入。

对于参考。

这是我的 HTML 和 javascript 代码：

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <title>React version</title>
</head>

<body>
    <!-- root div for rendering the carousel -->
    <div class="Carousel"></div>

    <!-- few scripts for react  -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin="anonymous"></script>

    <!-- some of the custom packages used in this project -->
    <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-spring-3d-carousel-2@1.0.1/dist/bundle.js" crossorigin="anonymous"></script>

    <!-- all the js file import -->
    <script type="text/babel" src="./Trial.js"></script>
    <script type="text/babel" src="./CustomCard.js"></script>

    <script type="text/babel">
        ReactDOM.render(<Trial />, document.querySelector('.Carousel'));
    </script>


</body>

</html>

JS

function Trial() {

  return (
    <div className="mainContainer">
      <div className="boxStyles">
        <Carousel
          slides={...someSlides}
           goToSlide={..someSlide}
           offsetRadius={2}
           animationConfig={{ tension: 100, friction: 15 }}
           autoPlay={true}
           interval={4}
           opacity={1}
         />
      </div>
    </div>
  );
}

只需帮助我了解如何使用importHTML Carousel。

谢谢！！

4

0 回答 0