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

Question

我试图在HTML文件中放置一个 React 组件并相应地呈现它。 我在我的 react 文件中使用了一个lottie-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/lottie-react@2.1.0/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/lottie-react@2.1.0/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

图片：

Answer 1

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

如果您需要使用实际的代码，以便将其导入你的HTML，你需要使用的raw ，可以使用访问View Raw按钮（如本）。

编辑

在react的导入下添加<script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js" crossorigin></script>然后编辑lottie-react的导入使用<script type="text/babel" src="https://unpkg.com/lottie-react@2.1.0/build/index.umd.js" crossorigin></script>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-23 10:23:23

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-23 10:23:23

解决方案1
1 已采纳 2021-07-23 10:23:23