React 找不到模块

Question

我正在尝试安装 https://github.com/wagerfield/parallax/，我已经阅读了文档，并且在 javascript 中获得了如何使用它的示例，我将在 React 中使用它，所以，使用该示例和 React 文档，我认为我的代码应该可以工作，但它不工作！，我认为可能有 2 个不工作的动机。

1- 在我的 html 内部 body 标签中出现此标签：

<noscript>You need to enable JavaScript to run this app.</noscript>

2- 当我悬停我通过 NPM 安装的模块时，vscode 给我看这个：

我正在使用 react hooks，在这里我找到了如何使用它的信息https://github.com/wagerfield/parallax/issues/167 还有这里的演示样本 https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html

我花了好几个小时想知道问题出在哪里！

这是我的 jsx 代码：

import React, {useEffect, useRef} from 'react';
// @ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';

const Home = () => {
  const sceneEl = useRef(null);

  useEffect(() => {
    const parallaxInstance = new Parallax(sceneEl.current, {
      relativeInput: true,
    })
    
    parallaxInstance.enable();

    return () => parallaxInstance.disable();

  }, [])

  return (
    <div id="container">
      <div id="scene" ref={sceneEl}>
        <div dataDepth="1.00"><img src={Layer1} /></div>
        <div dataDepth="0.80"><img src={Layer2} /></div>
        <div dataDepth="0.60"><img src={Layer3} /></div>
        <div dataDepth="0.40"><img src={Layer4} /></div>
        <div dataDepth="0.20"><img src={Layer5} /></div>
        <div dataDepth="0.00"><img src={Layer6} /></div>
      </div>
    </div>
  )
}

export default Home;

在我的浏览器中我可以看到这个：

但它没有“视差”效果。

Answer 1

那是因为您使用的是 TS，并且库的一侧没有类型声明。我认为您可以按照控制台显示的内容简单地解决这个问题。我没有 .d.ts 文件，只需创建一个并添加 declare module 'parallax-js'; 在此之后，如果您还没有该文件，请将其添加到 tsconfig.json 文件的 include 属性中，您应该没问题。

React 找不到模块

React cant find a module

javascript

npm

parallax

reactjs