相关疑难解决方法(0)

所以我有一个tab-component有3个项目:

React.DOM.ul( className: 'nav navbar-nav', 
    MenuItem( uid: 'home')
    MenuItem( uid: 'about')
    MenuItem( uid: 'contact)
)

而在.render中MenuItem:

React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
    React.DOM.a( href: "#"+@props.uid, @props.uid)
)

每次我点击一个项目,都会调用一个骨干路由器,然后调用tab-component它,然后调用一个page-component.

我仍然试图绕过一个基本上是单向数据流的事实.我已经习惯了直接操作DOM.

我想要做的是将.active类添加到单击的选项卡中,并确保将其从不活动的选项卡中删除.

我知道CSS技巧,您可以使用data-属性并将不同的样式应用于true或的属性false.

骨干路由器已经获得了变量uid并调用了正确的页面.我只是不确定如何最好地切换选项卡之间的类,因为只有一个可以同时处于活动状态.

现在我可以记录选择哪个选项卡,并切换它们等等.但是React.js已经具有这种记录保存功能.

在@handleClick你看,我甚至不希望使用的,因为路由器应该告诉tab-component这些人给的className: '.active',我想避免的jQuery,因为React.js并不需要直接的DOM操作.

我已经尝试了@state的一些东西,但我知道确实有一种非常优雅的方式来实现这个相当简单,我想我看过一些人的演示或视频.

我真的必须习惯并改变我的思维方式来思考React-ively.

只是寻找一种最佳实践方式,我可以用一种非常丑陋和笨重的方式来解决它,但我喜欢React.js,因为它非常简单.

我使用的与之反应react-router 2.0.0-rc4,react-bootstrap 0.28.2和react-router-bootstrap 0.20.1.我有导航栏主要使用以下结构,但.active该类未正确应用:

  <Navbar>
    <Nav activeKey={ this.state.selectedKey } onSelect={ this._onSelect } >
      <LinkContainer to="/">
        <NavItem eventKey={1}>Home</NavItem>
      </LinkContainer>
      <LinkContainer to="/login">
        <NavItem eventKey={2}>Login</NavItem>
      </LinkContainer>
      ...
    </Nav>
  </Navbar>

问题是.active当我在菜单项之间移动时,类没有被取消.因此,如果我单击NavItem 2,则两个项都变为活动状态(无论this.state.selectedKey设置为什么).我有一个更大的菜单,当点击任何菜单项时,所有导航项都被设置为活动状态.我错过了什么？

我不认为这个Q是这篇文章的重复,因为React-Bootstrap组件应该通过activeKeyprop 自动管理活动状态,但是..文档没有显示这个的明确例子,所以,困惑:(