在React.js頁腳 - 實施意見

導航條
非常嵌套內容，包括嚮導和部分窗戶。
頁腳是動態的，它的按鈕和功能性應該在內容的部分場景中進行更改。

現在，我有一個頁腳的商店被修改這樣實現：

componentWillMount =() => { 
    this.setFooterButtons(); 
    //REST OF 'componentWillMount' CODE 
}  
componentDidUpdate =() => { 

    //If the uploading step is 'file-properties-editor' 
    //then there is a view inside the view 
    //that sets the footer buttons, in other cases, 
    //the nested views does not change the footer's buttons 
    //and they are defined here. 

    if(this.state.uploadStep !== 'file-properties-editor'){ 
     this.setFooterButtons(); 
    } 
    //REST OF 'componentDidUpdate' CODE 
} 

setFooterButtons =() => { 
    footerActions.setFooterButtons([ 
     { 
      fn: this.props.onBack, 
      name: 'back', 
      disabled: this.state.uploadStep === 'uploading' 
     }, 
     { 
      fn: this.onJump, 
      name: 'jump', 
      class: 'star' 
     }, 
     { 
      fn: this.onComplete, 
      name: 'next' 
     } 
    ]); 
}

的問題是，有存儲的來自於各類不同的地方「setFooterButtons」太多調用嵌套視圖。

我嘗試過的其他事情是添加頁腳作爲屬性的按鈕作爲屬性，但它是非常混亂，以及例如我有一個視圖裏面，他們都顯示不同的頁腳。

來源

2015-11-03 Vitalik Zaidman

對於應用程序狀態，我會推薦一個應用程序商店。操作會觸發設置狀態。我將app store附加到應用程序控件並將appState道具傳遞給相關組件。來自https://github.com/calitek/ReactPatterns React.14/ReFluxPages的示例。

import Reflux from 'reflux'; 
 

 
import Actions from './Actions'; 
 

 
let AppStoreObject = { 
 
\t appState: {currentPage: 'home'}, 
 
\t init() { this.listenTo(Actions.appActions, this.onAppActions); }, 
 
\t onAppActions(action) { 
 
\t \t switch (action) { 
 
\t \t \t case 'home': 
 
\t \t \t case 'about': this.appState.currentPage = action; AppStore.trigger(); break; 
 
\t \t } 
 
\t }, 
 

 
\t getAppState() { return this.appState; } 
 
} 
 

 
const AppStore = Reflux.createStore(AppStoreObject); 
 
export default AppStore;

import React from 'react'; 
 

 
import AboutPage from './about/about.page'; 
 
import HomePage from './home/home.page'; 
 

 
import AppStore from '../flux/App.Store'; 
 

 
let AppCtrlSty = { 
 
\t height: '100%', 
 
\t padding: '0 10px 0 0' 
 
} 
 

 
let allPageSty = { 
 
\t height: '100%', 
 
\t margin: '0', 
 
\t overflow: 'hidden', 
 
\t padding: '0', 
 
\t width: '100%' 
 
}; 
 

 
class AppCtrlRender extends React.Component { 
 
    \t render() { 
 
\t \t let page = this.state.appState.currentPage; 
 
\t \t let hideAbout = (page != 'about'); 
 
\t \t let hideHome = (page != 'home'); 
 
\t \t return (
 
\t \t \t <div id='AppCtrlSty' style={AppCtrlSty}> 
 
\t \t \t \t <div id='allPageSty' style={allPageSty}> 
 
\t \t \t \t \t <AboutPage hide={hideAbout} /> 
 
\t \t \t \t \t <HomePage hide={hideHome} /> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
let getState = function() { return {appState: AppStore.getAppState(),}; }; 
 

 
export default class AppCtrl extends AppCtrlRender { 
 
\t constructor() { 
 
\t super(); 
 
\t \t this.state = getState(); 
 
\t } 
 

 
\t componentDidMount =() => { this.unsubscribe = AppStore.listen(this.storeDidChange); } 
 
\t componentWillUnmount =() => { this.unsubscribe(); } 
 
\t storeDidChange =() => { this.setState(getState()); } 
 
}

來源

2015-11-03 14:25:44

在React.js頁腳 - 實施意見

回答

相關問題