React.js中的页脚 - 实现建议

Question

所以我有以下设置：

• 导航栏
• 非常嵌套的内容，包括向导和部分窗口。
• 一个动态的页脚，它的按钮及其功能应该针对内容中的部分场景进行更改。

现在，我使用Footer的商店实现它，修改如下：

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'
        }
    ]);
}

问题在于存储太多的电话来存储＆＃39; setFooterButtons＆＃39;来自嵌套视图中各种类的各个地方。

我试过的其他事情是将页脚添加为按钮作为属性的组件，但是当我在视图中有一个视图，其中两个显示不同的页脚时，它也非常混乱。

Answer 1

对于app状态，我会推荐一个应用商店。动作将触发设置状态。我将app store附加到app控件并将appState props传递给相关组件。来自https://github.com/calitek/ReactPatterns React.14 / ReFluxPages的示例。

import Reflux from 'reflux';

import Actions from './Actions';

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

	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 = {
	height: '100%',
	padding: '0 10px 0 0'
}

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

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

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

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

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