Materialise css 视差图像在导航到另一条路线然后返回后消失

Question

我已经按照下面的代码使用物化 css 来创建 3 个图像的视差效果。当网页在开发服务器中加载时，一切都完美运行，但是如果我从页面导航到另一个组件然后再返回，所有视差图像几乎都消失了，就好像视差库不再工作一样。如果我重新加载网页，它们都会再次正常出现。

import React, { Component } from 'react'
import code from '../images/code.jpg';
import coffee from '../images/coffee.jpg';
import mac from '../images/mac.jpg';
import M from 'materialize-css/dist/js/materialize.min.js';

export default class About extends Component {

componentDidMount() {

    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, {});
 });
}


 render() {

     return (

             <div>


                <div className="parallax-container">
                    <div className="parallax"> <img className="responsive-img" src={coffee}
                </div>  

                <div className="parallax-container">
                    <div className="parallax"> <img className="responsive-img" src={coffee}
                </div>   

               <div className="parallax-container">
                    <div className="parallax"> <img className="responsive-img" src={coffee}
                </div>    

          </div>


      )
 }

Answer 1

您的 componentDidMount 中不需要 addEventListener。它不是必需的，因为 componentDidMount 生命周期方法为您提供了挂钩，用于初始化您想要在组件中使用的任何库（在您的情况下为视差）。在路由之间切换时视差图像消失的原因可能是因为 DOMContentLoaded 在路由之间切换时不再触发，因此您的视差库未被初始化。

请查看 React 的生命周期图以更好地理解这些生命周期方法的工作原理：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Materialise css 视差图像在导航到另一条路线然后返回后消失

Materialize css parallax images disappear after navigating away to a different route and then back

javascript

hook

materialize

parallax