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

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

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

物化CSS视差图像在导航到其他路线后消失，然后返回

1 个答案: