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

时间:2014-03-17 17:25:43

标签: class backbone.js tabs twitter-bootstrap-3 reactjs

所以我有tab-component有3项:

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

.render的{​​{1}}中:

MenuItem

每次点击某个项目时,都会调用骨干路由器,然后调用React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick, React.DOM.a( href: "#"+@props.uid, @props.uid) ) ,然后调用tab-component

我仍然试图围绕这个基本上是单向数据流的事实。而且我已经习惯了直接操作DOM。

我想要做的是将page-component类添加到单击的标签中,并确保将其从不活动的标签中删除。

我知道CSS技巧,您可以使用.active属性并对data-true的属性应用不同的样式。

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

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

您看到的uid,我甚至不想使用,因为路由器应告诉@handleClick哪一个给tab-component而我想避免使用jQuery ,因为React.js不需要直接操作DOM。

我已经尝试了@state的一些东西,但我知道确实有一种非常优雅的方式来实现这一点,我觉得我看了一些人的演示或视频。

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

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

3 个答案:

答案 0 :(得分:23)

将状态推到尽可能高的组件层次结构中,并在下面的所有级别处理不可变props。将活动标签存储在tab-component中并生成关闭数据的菜单项(在本例中为this.props)以减少代码重复似乎是有意义的:

以下示例的工作JSFiddle +一个Backbone路由器: 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})
      )
    );
  }
});

答案 1 :(得分:0)

如果您使用的是boostrap navbars,则可以尝试react-router-active-componet

答案 2 :(得分:-1)

您可以尝试将菜单项单击处理程序推送到它的父组件。事实上,我正在尝试做类似于你正在做的事情。我有一个顶层菜单栏组件,我想使用菜单栏模型来渲染菜单栏和项目。通过添加到菜单栏模型,其他组件可以为顶级菜单栏做出贡献...只需添加顶级菜单,子菜单和点击处理程序(在添加菜单的组件中)。然后顶级组件将呈现菜单栏UI,并且当点击任何内容时,它将使用"回调"要调用的组件单击处理程序。通过使用菜单模型,我可以为actice / mouseover / inactive等添加诸如css样式之类的东西,以及图标等。然后顶层菜单栏组件可以决定如何渲染项目,包括鼠标悬停,点击等。至少我认为它仍然可以工作,因为我自己是ReactJS的新手。