在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页脚 - 实施意见

回答

相关问题