在 React 中使用 Parallax.js

Question

我對 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？

Answer 1

嘗試在圖層上使用data-depth屬性而不是DataDepth 。