所以我有一个tab-component包含3个项目的项目:
tab-component
React.DOM.ul( className: 'nav navbar-nav', MenuItem( uid: 'home') MenuItem( uid: 'about') MenuItem( uid: 'contact) )
在的.render中MenuItem:
.render
MenuItem
React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick, React.DOM.a( href: "#"[email protected], @props.uid) )
每次单击某个项目时,都会调用一个骨干路由器,该骨干路由器将调用,而tab-component后者又将调用一个page-component。
page-component
我仍在努力解决基本上存在单向数据流这一事实。而且我习惯直接操作DOM。
我想做的是将.active类添加到单击的选项卡中,并确保将其从非活动类中删除。
.active
我所知道的CSS技巧,你可以使用data-属性和不同的造型适用于为属性true或false。
data-
true
false
骨干路由器已经获取了变量uid并调用正确的页面。我只是不确定如何最好地在选项卡之间切换类,因为一次只能激活一个。
uid
现在,我可以保留有关哪个选项卡被选中的记录,并对其进行切换等。但是React.js已经具有此记录保持功能。
在@handleClick你看,我甚至不希望使用的,因为路由器应该告诉tab-component这些人给的className: '.active',我想避免的jQuery,因为React.js并不需要直接的DOM操作。
@handleClick
className: '.active'
我已经使用@state尝试了一些方法,但是我确定有一种非常优雅的方法来实现此目标,我想我已经看过某人的演示文稿或视频。
我真的必须习惯于改变我的思维方式,以积极地思考React。
我只是在寻找一种最佳实践方式,所以我可以以一种非常笨拙的方式解决它,但是我喜欢React.js,因为它是如此的简单。
尽可能将状态推向更高的组件层次结构,并props在下面的所有级别上对不可变进行处理。将活动选项卡存储在您的设备中tab- component并从数据生成菜单项似乎很有意义(this.props在这种情况下),以减少代码重复:
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}) ) ); } });