將路徑渲染後，將JavaScript應用於React中的佈局

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