Материализуйте и отреагируйте-маршрутизатор, материализуйте, JS перестает работать при смене маршрута.

Question

Я использую React, response-router и материализую css. Я хочу добавить простой эффект параллакса на мою домашнюю страницу, и он работает, когда я впервые загружаю страницу:

import React from 'react'
import M from 'materialize-css';
import Cinema from '../cinema1.jpg'

const Home = () =>{

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

    return(
        <section>
            <div id="index-banner" className="parallax-container">  
                <div className="section no-pad-bot">
                    <div className="container">
                        <h1 className="header center">Material </h1>
                        <div className="row center">
                            <h5 className="header col s12 white-text">A parallax landing example</h5>
                        </div>
                        <div className="row center">
                            <a href="http://materializecss.com/getting-started.html" id="download-button" className="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
                        </div>
                    </div>
                </div>
                <div className="parallax"><img src={ Cinema } alt="Unsplashed background img 1" /></div>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et laoreet felis. Sed rhoncus vestibulum erat ut luctus. Aenean nec sem sagittis, pulvinar elit at, bibendum enim. Vivamus blandit, diam vel venenatis vehicula, dolor neque feugiat erat, id mollis metus mi eu leo. Duis suscipit vestibulum tortor. Quisque eget urna non est tincidunt gravida. Aenean sed ex mi. Fusce aliquet mollis finibus. Nam tristique pulvinar orci, cursus pulvinar lectus blandit id. Cras nulla est, viverra eget ultrices sit amet, vulputate non felis. Mauris condimentum dapibus tempor. Etiam sed leo metus. Mauris convallis nunc eu porttitor interdum. </p>
            </div>
        </section>
    )
}

Когда я меняю маршрут и возвращаюсь на домашнюю страницу, параллакс снова не запускается. Как получилось, что "M.Parallax.init (elems)"; перестает работать при изменении маршрута? Должен ли я написать функцию для ее запуска каждый раз, когда я нажимаю на домашний маршрут? Я хотел бы знать, почему он больше всего не работает.

Answer 1

Решением было превратить этот компонент на основе функций, где я хотел использовать эффект параллакса, в компонент на основе классов. Тогда я мог бы использовать ловушки жизненного цикла, чтобы проверить, монтировался ли компонент:

import M from 'materialize-css'


class Home extends Component {
    componentDidMount(){
        var elems = document.querySelectorAll('.parallax');
        M.Parallax.init(elems);
      };
    render(){
        return(
            <section>
                <div id="index-banner" className="parallax-container">  
                    <div className="section no-pad-bot">
                        <div className="container">
                            <h1 className="header center">Material </h1>
                            <div className="row center">
                                <h5 className="header col s12 white-text">A parallax landing example</h5>
                            </div>
                            <div className="row center">
                                <a href="http://materializecss.com/getting-started.html" id="download-button" className="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
                            </div>
                        </div>
                    </div>
                    <div className="parallax"><img src={ Cinema } alt="Unsplashed background img 1" /></div>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et laoreet felis. Sed rhoncus vestibulum erat ut luctus. Aenean nec sem sagittis, pulvinar elit at, bibendum enim. Vivamus blandit, diam vel venenatis vehicula, dolor neque feugiat erat, id mollis metus mi eu leo. Duis suscipit vestibulum tortor. Quisque eget urna non est tincidunt gravida. Aenean sed ex mi. Fusce aliquet mollis finibus. Nam tristique pulvinar orci, cursus pulvinar lectus blandit id. Cras nulla est, viverra eget ultrices sit amet, vulputate non felis. Mauris condimentum dapibus tempor. Etiam sed leo metus. Mauris convallis nunc eu porttitor interdum. </p>
                </div>
            </section>
        )
    }
}

export default Home

Теперь каждый раз, когда компонент монтируется, параллакс работает.