[英]Using Parallax.js in React
我对 React 很陌生,我正在尝试使用Parallax.js库进行反应。 现在我已经完成了基础知识并使用 npm 安装了库,我已经导入了库,并且我遵循了与我的问题相关的主题。
但是现在我很难使视差起作用,我收到以下错误:
index.js:1 Warning: React does not recognize the `dataDepth` prop on a DOM element. If you intentionally
want it to appear in the DOM as a custom attribute, spell it as lowercase `datadepth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in li (at home.js:17)
in ul (at home.js:16)
in section (at home.js:15)
in ParallaxComponent (at App.js:7)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)
这是我的代码
import React, { Component } from 'react'
import './css/style.css';
import headerbg from './images/header-bg.svg';
import Parallax from 'parallax-js' // Now published on NPM
class ParallaxComponent extends Component {
componentDidMount() {
this.parallax = new Parallax(this.scene)
}
componentWillUnmount() {
this.parallax.disable()
}
render() {
return (
<section className="header">
<ul ref={el => this.scene = el}>
<li className="layer" dataDepth="1.00">
<img src={headerbg} alt="Header background"/>
</li>
</ul>
<div className="content">
<h1>אנחנו דואגים להכל</h1>
<h2>אתם רק צריכים לאשר</h2>
<p>
אצלנו ב Triple V אין פשרות, איכות היא המטרה העליונה! <br/>
כל האתרים שלנו נבנים תחת פלטפורמת וורדפרס עם ציוני <br/>
מהירות שלא יורדים מ80 למובייל! <br/>
למה זה חשוב אתם שואלים? גוגל אוהב מהירות
<br/>
ככל שהאתר שלכם יותר מהיר ככה גוגל יותר מרוצה.
</p>
</div>
</section>
)
}
}
export default ParallaxComponent;
如何在 React 库中正确运行 Parallax.js?
尝试在图层上使用data-depth
属性而不是DataDepth
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.