使用 React.js 在选项卡上切换类 [英] Switch class on tabs with React.js
问题描述
所以我有一个 tab-component 有 3 个项目:
So I have a tab-component that has 3 items:
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，然后调用page-component.
Every time I click an item, a backbone router gets called, which will then call the tab-component, which in turn will call a page-component.
我仍在努力理解基本上是单向数据流这一事实.而且我已经习惯了直接操作 DOM.
I'm still trying to wrap my head around the fact there's basically a one-way data-flow. And I'm so used to manipulating the DOM directly.
我想要做的是将 .active 类添加到单击的选项卡中，并确保将其从不活动的选项卡中删除.
What I want to do, is add the .active class to the tab clicked, and make sure it gets removed from the inactive ones.
我知道 CSS 技巧，您可以在其中使用 data- 属性并对 true 或 false 属性应用不同的样式.
I know the CSS trick where you can use a data- attribute and apply different styling to the attribute that is true or false.
骨干路由器已经获得了变量uid并调用了正确的页面.我只是不确定如何最好地在选项卡之间切换类，因为只能同时激活一个.
The backbone router already has already gotten the variable uid and calls the right page. I'm just not sure how to best toggle the classes between tabs, because only one can be active at the same time.
现在我可以记录选择了哪个选项卡，并切换它们等.但是 React.js 已经具有这种记录保存功能.
Now I could keep some record of which tab is and was selected, and toggle them etc. But React.js already has this record-keeping functionality.
你看到的@handleClick，我什至不想用，因为路由器应该告诉tab-component给哪个className: '.active' 我想避免使用 jQuery，因为 React.js 不需要直接的 DOM 操作.
The @handleClick you see, I don't even want to use, because the router should tell the tab-component which one to give the className: '.active' And I want to avoid jQuery, because React.js doesn't need direct DOM manipulation.
我已经用@state 尝试了一些东西，但我确信有一种非常优雅的方法可以实现这一点，相当简单，我想我看了一些演示或视频，有人这样做了.
I've tried some things with @state but I know for sure there is a really elegant way to achieve this fairly simple, I think I watched some presentation or video of someone doing it.
我真的必须习惯并改变我的思维方式，以反应性地思考.
I'm really have to get used to and change my mindset towards thinking React-ively.
只是在寻找一种最佳实践方式，我可以用一种非常丑陋和笨重的方式来解决它，但我喜欢 React.js，因为它非常简单.
Just looking for a best practice way, I could solve it in a really ugly and bulky way, but I like React.js because it's so simple.
推荐答案
将状态尽可能向上推到组件层次结构，并在以下所有级别处理不可变的 props.将活动选项卡存储在您的 tab-component 中并根据数据生成菜单项(在本例中为 this.props)以减少代码重复似乎是有意义的:
Push the state as high up the component hierarchy as possible and work on the immutable props at all levels below. It seems to make sense to store the active tab in your tab-component and to generate the menu items off data (this.props in this case) to reduce code duplication:
以下示例的 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)
);
}
});
MenuItem 除了附加一个类名和暴露一个点击事件之外几乎没有什么可以做的:
The MenuItem could do very little aside from append a class name and expose a click event:
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})
)
);
}
});
这篇关于使用 React.js 在选项卡上切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
