问题描述
我正在尝试安装 https://github.com/wagerfield/parallax/,我已经阅读了文档,并且我得到了如何在 javascript 中使用它的示例,我将在 React 中使用它,因此,使用该示例和文档对于反应,我认为我的代码应该可以工作,但它没有!,我认为不工作可能有两个动机。
<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;
在我的浏览器中,我可以看到:
但它没有“视差”效果?。
解决方法
那是因为您使用的是 TS 并且库一侧没有类型声明。我认为您可以按照控制台显示的方式简单地解决此问题。
我你没有 .d.ts
文件,只需创建一个并添加 declare module 'parallax-js';
在此之后,如果您还没有该文件,请将其添加到您的 include
文件的 tsconfig.json
属性中,您应该没问题。