我有一个包含3个选项卡的tab-component
:
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)
)
每次我点击一个项目,都会调用一个backbone路由器,然后调用“tab-component”,接着调用“page-component”。
我仍在努力理解这种基本上是单向数据流的事实。而且我习惯直接操作DOM。
我想做的是,将“.active”类添加到所点击的选项卡,并确保它从非活动选项卡中删除。
我知道CSS技巧,可以使用“data-”属性,并对为“true”或“false”的属性应用不同的样式。
backbone路由器已经获得了变量“uid”,并调用了正确的页面。我只是不确定如何最好地在选项卡之间切换类,因为同一时间只能有一个选项卡处于活动状态。
现在,我可以保留一些记录,以确定哪个选项卡被选择和已选择,并进行切换等操作。但React.js已经具有此记录功能。
您看到的“@handleClick”,我甚至不想使用,因为路由器应该告诉“tab-component”哪个选项卡应该给出“className:'.active'”。而且我想避免使用jQuery,因为React.js不需要直接操作DOM。
我已经尝试过一些@state的方法,但我知道肯定有一种非常优雅的方法来实现这个相当简单的问题,我想我看过某个人的演示或视频。
我真的需要习惯并改变我的思维方式,以React.js为导向。
只是在寻找最佳实践方法,我可以用非常丑陋和笨重的方式解决这个问题,但我喜欢React.js,因为它非常简单。
this.props.active ? 'active' : null;
和active: (this.state.activeMenuItemUid === menuItem.uid)
真的很管用,如此简单的表达式... - TrySpaceReact.renderComponent
渲染的根组件上调用setProps
。在路由更改时,您可以通过调用setProps
来设置新的活动选项卡。在我的示例中,我将活动菜单项作为状态的一部分,但也可以将其移动到属性中以实现此目的。 - Ross Allen.bind()
部分确保绑定的组件上更新props
或state
中的任一项?所以从技术上讲,我使用props
还是state
并不重要?它只在我想要访问它们的生命周期时才有影响。(但肯定最好在功能上划分state
和props
。)还有一件事:setProps
和setState
都会触发相同的组件生命周期吗? - TrySpaceclassSet
已经过时了。您能否更新您的fiddle?https://facebook.github.io/react/docs/class-name-manipulation.html - thedanotto