[英]React cant find a module
我正在尝试安装https://github.com/wagerfield/parallax/ ,我已经阅读了文档,并且获得了如何在 javascript 中使用它的示例,我将在 React 中使用它,所以,有了它示例和 react 文档我认为我的代码应该可以工作,但它没有。 我想也许不工作有两个动机。
1- 在我的 html 内部标签中,出现了这个标签:
<noscript>You need to enable JavaScript to run this app.</noscript>
2-当我 hover 通过 NPM 安装的模块时,vscode 向我显示:
我正在使用反应钩子,在这里我找到了如何使用它的信息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;
在我的浏览器中,我可以看到:
但它没有“视差”效应。
那是因为您使用的是 TS,并且库一侧没有类型声明。 我认为您可以完全按照控制台显示的方式解决此问题。 如果您没有.d.ts
文件,只需创建一个并添加declare module 'parallax-js';
在此之后,如果您还没有该文件,请将其添加到您的tsconfig.json
文件的include
属性中,您应该没问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.