将状态尽可能向上推到组件层次结构，并props在下面的所有级别上处理不可变的。将活动选项卡存储在您的活动选项卡中tab-component并从数据生成菜单项（this.props在本例中）以减少代码重复似乎是有意义的：

以下示例的 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 几乎可以做的很少：

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-router-active-componet - 如果您使用 boostrap 导航栏。

您可以尝试将菜单项单击处理程序推送到其父组件。事实上，我正在尝试做一些类似于你正在做的事情......我有一个顶级菜单栏组件，我想使用菜单栏模型来呈现菜单栏和项目。其他组件可以通过添加到菜单栏模型来为顶级菜单栏做出贡献……只需添加顶级菜单、子菜单项和单击处理程序（在添加菜单的组件中）。然后顶级组件将呈现菜单栏 UI，当单击任何内容时，它将使用“回调”组件单击处理程序进行调用。通过使用菜单模型，我可以添加诸如动作/鼠标悬停/非活动等的 css 样式以及图标等。然后顶级菜单栏组件可以决定如何呈现项目，包括鼠标悬停、点击等。