react.js - React-router che si occupa di intestazioni e piè di pagina fissi

Question

Ho l'app React.js aromatizzata con react-router, ho un dubbio sulla mia attuale gestione delle rotte.

design appare come segue, layout comune cellulare, intestazione fissa e piè di pagina, il contenuto al centro:

Nel caso essi sono statici posso semplicemente creare tale struttura:

<RatchetHeader /> 
<RatchetFooter /> 
<RouteHandler /> 

Ma a volte cambiano da pagina a pagina, ad esempio:

• titolo e dei pulsanti testi
• numero di pulsanti
• piè di pagina non è presente in alcune pagine

E 'meglio mettere al loro interno controller di vista e ri-renderizzare ogni volta con RouteHandler?

Answer 1

Non so specifiche di Ratchet, ma in termini generali di reagire, nella tua situazione, è meglio infatti per il piè di pagina ad inserirlo all'interno di una RouteHandler, così che si può definire la sua presenza a seconda delle vostre preferenze .

Per l'intestazione, credo che ti piacerebbe averlo sempre lì? In tal caso, puoi lasciarlo all'esterno del gestore e passarlo invece per cambiarne il layout.

Il risultato finale sarà qualcosa di simile a questo (importazioni dei componenti sono implicite, quindi non li sto anche per il bene di mantenere concentrarsi sulla logica):

Il app.js:

<Route handler={AppHandler}> 
    <DefaultRoute handler={HomeHandler}/> 
    <Route name='foo' path='/foo' handler={FooHandler}/> 
    <Route name='bar' path='/bar' handler={BarHandler}/> 
    <NotFoundRoute handler={NotFoundHandler}/> 
</Route> 

);

I App.react.js:

<div> 
    <Header title={this.state.title}/> 
    <RouteHandler {...this.props}/> 
</div> 

Il Header.react.js - utilizzando alcuni componenti immaginarie per l'illustrazione:

var Header = React.createClass({ 
    render: function(){ 
    return (
     <div> 
     <Button type="previous" title="Left"/> 
     <HeaderTitle>{this.props.title}</HeaderTitle> 
     <Button type="next" title="Right"/> 
     </div> 
    ); 
    } 
}); 

module.exports = Header; 

I Foo.react.js:

var Foo = React.createClass({ 
    render: function(){ 
    var footerActions = [ // Ideally you'd get this from a constants file or something alike. 
     { 
     'actionType': 'viewHome', 
     'actionIcon': 'icon-home', 
     'actionLabel': 'Home' 
     }, 
     { 
     'actionType': 'viewProfile', 
     'actionIcon': 'icon-profile', 
     'actionLabel': 'Profile' 
     }, 
     { 
     'actionType': 'viewFavorites', 
     'actionIcon': 'icon-favorites', 
     'actionLabel': 'Favorites' 
     }, 
     ... 
    ]; 
    return (
     <div>Your content here</div> 
     <Footer actions={footerActions}/> 
    ); 
    } 
}); 

module.exports = Foo; 

I Footer.react.js:

var Footer = React.createClass({ 
    render: function(){ 
    var actionItems = this.props.actions.map(function(item){ 
     return (<ActionItem action={item.actionType} icon={item.actionIcon} label={item.actionLabel}/>); 
    }); 
    return (
     <div>{actionItems}</div> 
    ) 
    } 
}); 

module.exports = Footer; 

Poi, nel Bar.react.js si può solo non includere la componente <Footer>, in questo modo:

Il bar. reagire.js:

var Bar = React.createClass({ 
    render: function(){ 
    return (
     <div>Your content here</div> 
    ); 
    } 
}); 

module.exports = Bar; 

Speranza che aiuta!