在 React 中使用 Parallax.js

Question

I'm quite new to React, and I'm trying to use Parallax.js library in react. Now I have done the basics and installed the library using npm, I have imported the library and I have followed this topic that related to my question.

But now I'm having difficulty to make parallax work, I recieve the following error:

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)

And this is my code

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;

How can I run Parallax.js inside React library properly?

Answer 1

Try using data-depth attribute instead of DataDepth on your layers.