在React中使用Parallax.js

Question

我是React的新手，我正在尝试使用react中的Parallax.js库。现在，我已经完成了基础工作，并使用npm安装库，我已经导入了库，并且遵循了与我的问题相关的topic。

但现在我很难使视差工作，我收到以下错误：

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？

Answer 1

尝试在图层上使用data-depth属性而不是DataDepth。