ルートがレンダリングされた後にReactのレイアウトにJavaScriptを適用

Question

Meteor 1.4、Flow Router、Reactを使用して、レイアウトを初期化するためにJavaScriptコードを実行する必要があります。現在、私はこの

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

を持っていると私はレイアウトのHTMLにこの

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

を実行する必要があります。このコードは、MainLayoutがレンダリングされるたびに実行され、同じレイアウトが他のルートで使用されます（明らかに！）。

レイアウトの初期化コードはどこに置く必要がありますか？

Answer 1

ことはあなたのコンポーネントのcomponentDidMount機能でそれを入れてください：

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

を...あなたは（子供を含む小道具が変更されたときのような）のアップデートでそれらを再実行する場合を除き：

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(); 
    } 
}