javascript - ReactJS 在多个组件之间保持单个 "Active"状态

Question

我试图在遵守文档的同时遵循最佳实践。从可维护性的 Angular 来看，没有创建许多一次性方法来处理事情。

总而言之，我试图在兄弟元素之间实现一种至少在视觉上处于“事件”状态的状态。使用像 jQuery 这样的东西我会简单地做..

$(document).on('.nav-component', 'click', function(e) {
    $('.nav-component').removeClass('active');
    $(this).addClass('active');
});

然而，在React中，它本身的每个组件都是独立于下一个和上一个组件的，并且应该按照文档保持原样。

也就是说，当我处理组件的单击事件时，我可以成功地将其设置为事件和非事件状态，分别打开和关闭它。但当我不需要它们时，我最终会发现有多个“事件”元素。

这是为了设置某种导航。所以我希望目前正在使用的那个具有该事件类，而其余的则没有

Answer 1

我使用带有回流的 app.store 来设置多个页面/组件的状态。您可以对公共(public)组件执行相同的传递状态，但使用通量模式更干净。

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

在页面/组件中检查 this.props.hide。

export default class AboutPage extends Component {
	render() {
		if (this.props.hide) return null;
		return (
			<div style={AboutPageSty}>
				React 1.4 ReFlux used for app state. This is the About Page.
				<NavMenu />
			</div>
		);
	}
}