在 html 中使用 react 时如何使用 npm 包？

Satyam 发表于 Dev

萨蒂扬

我试图在HTML文件中放置一个 React 组件并相应地呈现它。我lottie-react在 react 文件中使用了一个组件，但问题是我不知道如何使用unpkg导入相同的包。

我遵循了将 React 添加到网站的文档，并为 HTML 构建了此代码结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React version</title>
</head>
<body>
    <!-- root div for rendering the carousel -->
    <div class="ReactCustom"></div>

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

    <!-- some of the custom packages used in this project -->
    <script src="https://unpkg.com/[email protected]/build/index.min.js" crossorigin></script>

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

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


</body>

</html>

这是Trail.js文件结构。

function Trial() {
  return (
    <div className="mainContainer">
      <div className="boxStyles">
        <Lottie
        animationData={`./animations/EARBUD.json`}
        loop
        autoPlay
        className={styles.animationStyle}
      />
      </div>
    </div>
  );
}

这样做，我在控制台中收到错误消息。

错误说：

babel.min.js:7 Uncaught SyntaxError: https://unpkg.com/browse/[email protected]/build/index.js: Unexpected token (1:1)

请帮忙！！

谢谢！！

更多更新：

新错误-

index.min.js:1 Uncaught ReferenceError: exports is not defined

和

react-dom.production.min.js:141 ReferenceError: Lottie is not defined

图片：

马可尼西

问题是您使用了错误的 url：这指向browseunpkg的部分，当您需要查看文件内容时很有用。

如果您需要使用实际代码以将其导入 html，则需要使用raw可以通过View Raw按钮访问的代码（例如this）。

编辑

<script src="https://unpkg.com/[email protected]/prop-types.min.js" crossorigin></script>在import of下添加react然后编辑import lottie-reactwith<script type="text/babel" src="https://unpkg.com/[email protected]/build/index.umd.js" crossorigin></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。