尽可能将状态推向更高的组件层次结构，并
props在下面的所有级别上对不可变进行处理。将活动选项卡存储在您的设备中
tab-component并从数据生成菜单项似乎很有意义（
this.props在这种情况下），以减少代码重复：
以下示例的工作JSFiddle +骨干路由器： http
:
//jsfiddle.net/ssorallen/4G46g/
var TabComponent = React.createClass({ getDefaultProps: function() { return { menuItems: [ {uid: 'home'}, {uid: 'about'}, {uid: 'contact'} ] }; }, getInitialState: function() { return { activeMenuItemUid: 'home' }; }, setActiveMenuItem: function(uid) { this.setState({activeMenuItemUid: uid}); }, render: function() { var menuItems = this.props.menuItems.map(function(menuItem) { return ( MenuItem({ active: (this.state.activeMenuItemUid === menuItem.uid), key: menuItem.uid, onSelect: this.setActiveMenuItem, uid: menuItem.uid }) ); }.bind(this)); return ( React.DOM.ul({className: 'nav navbar-nav'}, menuItems) ); }});除了附加类名和公开click事件外，MenuItem几乎无能为力：
var MenuItem = React.createClass({ handleClick: function(event) { event.preventDefault(); this.props.onSelect(this.props.uid); }, render: function() { var className = this.props.active ? 'active' : null; return ( React.DOM.li({className: className}, React.DOM.a({href: "#" + this.props.uid, onClick: this.handleClick}) ) ); }});
