Class 使用React.js在选项卡上切换类

因此，我有一个

选项卡组件

，它有3项：

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

在

菜单项的
.render
中：

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

每次我单击一个项目，就会调用一个主干路由器，然后它会调用
选项卡组件
，而选项卡组件又会调用
页面组件

我仍在试图让我的头脑明白，基本上是单向数据流。我已经习惯了直接操纵DOM

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

我知道CSS技巧，你可以使用
数据-
属性，并对
true
或
false
属性应用不同的样式

主干路由器已经获取了变量
uid
，并调用了正确的页面。我只是不知道如何最好地在选项卡之间切换类，因为在同一时间只有一个类处于活动状态

现在我可以保留一些记录，记录选择了哪个选项卡，并切换它们，等等。但是React.js已经有了这个记录功能

你看，
@handleClick
我甚至不想使用，因为路由器应该告诉
选项卡组件
给
类名：'.active'
哪一个，我想避免使用jQuery，因为React.js不需要直接的DOM操作

我曾经尝试过@state的一些功能，但我确信有一种非常优雅的方法可以实现这一点，非常简单，我想我看过一些演示或视频

我真的必须习惯并改变我的思维方式，做出反应

只要寻找一种最佳实践方法，我就可以用一种非常丑陋和笨重的方法来解决它，但我喜欢React.js，因为它非常简单。
将状态尽可能推到组件层次结构的最高层，并在下面的所有级别上使用不变的
道具。将活动选项卡存储在
选项卡组件中，并根据数据生成菜单项（本例中为
this.props
），以减少代码重复，似乎是有意义的：

以下示例的中间部分+主干路由器：

MenuItem除了附加一个类名和公开一个click事件之外几乎没有什么作用：

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})
      )
    );
  }
});

您可以尝试将菜单项click handler向上推到其父组件。事实上，我正试图做一些与你正在做的相似的事情。。我有一个顶级菜单栏组件，我想使用菜单栏模型来呈现菜单栏和菜单项。其他组件可以通过添加到菜单栏模型来为顶级菜单栏做出贡献。。。只需添加顶级菜单、子菜单项，然后单击处理程序（位于添加菜单的组件中）。顶级组件随后将呈现菜单栏UI，当单击任何内容时，它将使用“回调”组件单击处理程序来调用。通过使用菜单模型，我可以为actice/mouseover/inactive等添加css样式，以及图标等。顶级菜单栏组件可以决定如何渲染项目，包括鼠标悬停、单击等。至少我认为它可以。。由于我对ReactJS还不熟悉，所以仍在研究它。
如果你使用boostrap导航条，你可以试试。
谢谢，这为我解决了很多问题，但是，我正在处理一个路由器，当URL更改时，调用：
React.renderComponent（TabComponent（uid:'home'））
，触发一系列不应在reacts逻辑中触发的组件。阅读以下评论：但是技术部分：
this.props.active？“活动：空
和
active：（this.state.activeMenuItemUid===menuItem.uid）
真的做到了，这些简单的表达式……您可以调用通过
React.renderComponent
调用呈现的根组件。在路由更改时，您可以通过调用
setProps
设置新的活动选项卡。在我的示例中，我将活动菜单项作为状态的一部分，但可以将其移动到props以实现这一点。要明确的是，
.bind（）
部分确保在其绑定组件上更新
props
或
state
？因此，从技术上讲，我是否会使用
道具
或
状态
？这只关系到我希望在生命周期的哪个时刻能够访问它们。（当然最好是按功能划分
state
和
props
）还有最后一件事：
setProps
和
setState
都会触发相同组件的生命周期？
classSet
被删除了。你能更新一下你的小提琴吗？
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})
      )
    );
  }
});