Wenden Sie JavaScript auf das Layout in React an, nachdem die Route gerendert wurde.

Question

Mit Meteor 1.4, Flow Router und React muss ich einen JavaScript-Code ausführen, um das Layout zu initialisieren. Derzeit habe ich diese

FlowRouter.route('/', { 
    name: 'Home', 
    action() { 
    mount(MainLayout, { 
     content: <div>Home</div> 
    }); 
    } 
}); 

Und ich brauche diese

$(function() { 
    $('.button-collapse').sideNav(); 
    $('.parallax').parallax(); 
}); 

im Layout HTML auszuführen. Dieser Code sollte jedes Mal ausgeführt werden, wenn MainLayout gerendert wird, und das gleiche Layout wird in anderen Routen verwendet (natürlich!).

Wo sollte ich den Layout-Initialisierungscode eingeben?

Answer 1

Legen Sie es in Ihrem componentDidMount Funktion der Komponente:

class MainLayout extends React.Component { 
    componentDidMount() { 
    $('.button-collapse').sideNav(); 
    $('.parallax').parallax(); 
    } 
} 

... es sei denn, Sie die auf Updates erneut ausführen wollen (wie wenn Requisiten Kinder ändern einschließlich):

class MainLayout extends React.Component { 
    componentDidMount() { 
    this.isMounted = true; 
    this.initialiseJQueryWidgets(); 
    } 

    componentDidUpdate() { 
    if (this.isMounted) // In case you're doing server-side rendering 
     this.initialiseJQueryWidgets(); 
    } 

    initialiseJQueryWidgets() { 
    $('.button-collapse').sideNav(); 
    $('.parallax').parallax(); 
    } 
}