所以我有一个包含3个项目的标签组件：
React.DOM.ul( className: 'nav navbar-nav',MenuItem( uid: 'home')
MenuItem( uid: 'about')
MenuItem( uid: 'contact)
)
在MenuItem的.render中：
React.DOM.li( id : @props.uid,className: @activeClass,onClick: @handleClick,React.DOM.a( href: "#"+@props.uid,@props.uid) )
每次我点击一个项目时,都会调用一个骨干路由器,然后调用tab-component,然后调用一个页面组件.
我仍然试图围绕这样一个事实,即基本上是单向数据流.我已经习惯直接操纵DOM了.
我想要做的是将.active类添加到单击的选项卡中,并确保将其从非活动类中删除.
我知道CSS技巧,您可以使用数据属性并将不同的样式应用于属性true或false.
骨干路由器已经获得了变量uid并调用了正确的页面.我只是不确定如何最好地切换选项卡之间的类,因为只有一个可以同时处于活动状态.
现在我可以记录哪个选项卡被选中,并切换它们等等.但是React.js已经具有这种记录保存功能.
@handleClick你看,我甚至不想使用,因为路由器应该告诉tab-component哪一个给className：’.active’而且我想避免使用jQuery,因为React.js不需要直接DOM操作.
我已经尝试了@state的一些东西,但我知道确实有一种非常优雅的方式来实现这个相当简单,我想我看过某人做过的演示或视频.
我真的必须习惯并改变我的思维方式来思考React-ively.
只是寻找一种最佳实践方式,我可以用一种非常丑陋和笨重的方式来解决它,但我喜欢React.js,因为它非常简单.
将状态推到尽可能高的组件层次结构中,并在下面的所有级别处理不可变的道具.将活动选项卡存储在选项卡组件中并生成关闭数据的菜单项(在本例中为this.props)以减少代码重复似乎是有意义的：
使用以下示例的JSFiddle作为Backbone Router：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})
)
);
}
});
