React中使用Parallax.js遇dataDepth属性警告，求正确实现方法

Hey there! Let's break down what's going wrong and fix your parallax implementation step by step.

First: Why the Warning? #

The warning about dataDepth is happening because React treats camelCase props on DOM elements as React-specific attributes, not native HTML data attributes. Parallax.js expects the custom attribute to be data-depth (kebab-case), so we need to adjust that to match HTML standards and make React happy.

Second: Why No Parallax Effect? #

Chances are, your elements aren't styled correctly—Parallax.js relies on proper positioning (relative/absolute) to calculate and apply the parallax shift. Without the right CSS, the library can't move the layers as expected.

Step-by-Step Fixes #

1. Fix the Data Attribute #

Replace dataDepth="1.00" with data-depth="1.00" on your <li> element. React will automatically map this kebab-case attribute to the correct DOM data-depth property, which Parallax.js reads via the element's dataset.depth.

2. Add Required CSS #

Add these styles to your style.css to ensure the parallax scene and layers are positioned correctly:

.header {
  position: relative;
  height: 100vh; /* Or set a fixed height like 800px */
  overflow: hidden;
}

.header ul {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header .layer img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Optional: Ensures image covers the layer without distortion */
}

.header .content {
  position: relative;
  z-index: 10; /* Makes sure content sits on top of the parallax layer */
  padding: 2rem;
  color: white; /* Adjust based on your image's color scheme */
}

3. Clean Up the Component Properly #

Instead of just disable() in componentWillUnmount, use destroy() to fully clean up the Parallax instance and prevent memory leaks—this is a better practice for React components:

componentWillUnmount() {
  if (this.parallax) {
    this.parallax.destroy();
  }
}

Full Corrected Component Code #

Here's your updated component with all fixes applied:

import React, { Component } from 'react'
import './css/style.css';
import headerbg from './images/header-bg.svg';
import Parallax from 'parallax-js'

class ParallaxComponent extends Component {
  componentDidMount() {
    // Ensure the scene element exists before initializing
    if (this.scene) {
      this.parallax = new Parallax(this.scene);
    }
  }

  componentWillUnmount() {
    if (this.parallax) {
      this.parallax.destroy();
    }
  }

  render() {
    return (
      <section className="header">
        <ul ref={el => this.scene = el}>
          <li className="layer" data-depth="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;

Testing the Fix #

After applying these changes:

• The dataDepth warning should disappear completely.
• The parallax effect should work when you scroll—your background image will shift relative to the content.

If you still don't see the effect, double-check:

• That the Parallax instance is being initialized (add a console.log(this.parallax) in componentDidMount to confirm).
• That your header has a defined height (100vh will make it take the full viewport height, which is perfect for testing).

内容的提问来源于stack exchange，提问作者Yotam Dahan