Материализация css Параллакс изображения исчезают после перехода на другой маршрут, а затем обратно - PullRequest
Новая
       35

Материализация css Параллакс изображения исчезают после перехода на другой маршрут, а затем обратно

0 голосов
/ 25 октября 2019

Я использовал материализовать CSS согласно приведенному ниже коду для создания эффекта параллакса на 3 изображениях. Когда веб-страница загружается на dev-сервер, все работает отлично, однако, если я перейду от страницы к другому компоненту, а затем снова вернусь, все изображения параллакса исчезнут почти так, как будто библиотека параллакса больше не работает. Если я перезагружаю веб-страницу, все они снова появляются как обычно. 

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>


      )
 }

1 Ответ

1 голос
/ 27 октября 2019

Вам не нужно addEventListener в вашем componentDidMount. Он не нужен, так как метод жизненного цикла componentDidMount дает вам ловушку, которую вы ищете для инициализации любых библиотек, которые вы хотите использовать в своем компоненте (параллакс в вашем случае). Причина, по которой ваши изображения параллакса исчезают при переключении между маршрутами, возможно, в том, что DOMContentLoaded больше не срабатывает при переключении между маршрутами и, следовательно, ваша библиотека параллакса не инициализируется.

Пожалуйста, посмотрите на жизнь Reactдиаграмма цикла, чтобы лучше понять, как работают эти методы жизненного цикла: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

...