首页 > 解决方案 > html 中的 Javascript 文件在 React 中不起作用

问题描述

我正在尝试使用第三方 Javascript 文件来创建滚动效果。作为测试,我让它在一个普通的 html 文件上工作,但是当我尝试在 React 中使用它时,它甚至不会运行。

根据GitHub 资源,我必须使用类似于此的脚本:

<script type="text/javascript" src="./src/skrollr.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>

这是 React html 文件:

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

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

<body>
  <div id="root"></div>
</body>
<script type="text/babel" src="../src/skrollr.js"></script>
<script type="text/babel">
  var s = skrollr.init();
</script>

</html>

我读到我需要将类型更改为 bable。这至少阻止了一些错误。但它仍然不会运行。

如果我尝试将其导入到我的 App.js 文件中,我会收到一个新错误,说明:

src\skrollr.js 第 1772:37 行:'define' 未定义 no-undef
第 1773:3 行:'define' 未定义 no-undef

此页面的非反应版本中不存在此错误。

我仍然很陌生,我想尝试让它发挥作用,这样我就可以更多地了解代码之间的关系。

标签: javascriptreactjsexternal

解决方案


推荐阅读