与React.js标签开关类 [英] Switch class on tabs with 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: "#"[e-mail], @props.uid)
)

我每次单击一个项目，一个骨干路由器被调用，然后将调用标签组件，这反过来将调用页面组件。

我仍然在试图总结我的周围其实有基本上是一个单向数据流的头。而且我习惯了直接操作DOM。

I'm still trying to wrap my head around the fact there's basically a one-way data-flow. And I'm so used to manipulating the DOM directly.

我想要做什么，是。主动类添加到选项卡点击，并确保它被从不活跃的删除。

What I want to do, is add the .active class to the tab clicked, and make sure it gets removed from the inactive ones.

我知道CSS窍门，你可以使用数据 - 属性，不同的造型适用于为真正或假。

I know the CSS trick where you can use a data- attribute and apply different styling to the attribute that is true or false.

的骨干路由器已经已经得到变量 UID 并调用正确的页面。我只是不知道如何以最佳方式切换标签之间的类，因为只有一个能在同一时间被激活。

The backbone router already has already gotten the variable uid and calls the right page. I'm just not sure how to best toggle the classes between tabs, because only one can be active at the same time.

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

Now I could keep some record of which tab is and was selected, and toggle them etc. But React.js already has this record-keeping functionality.

在你看到的 @handleClick ，我甚至不希望使用，因为路由器应该告诉标签组件给哪一个的className：'。主动键，我想避免的jQuery，因为React.js并不需要直接的DOM操作

The @handleClick you see, I don't even want to use, because the router should tell the tab-component which one to give the className: '.active' And I want to avoid jQuery, because React.js doesn't need direct DOM manipulation.

我已经尝试了一些事情，但@state我知道肯定有一个非常优雅的方式来实现这一相当简单的，我觉得我看了一些presentation或某人的视频做。

I've tried some things with @state but I know for sure there is a really elegant way to achieve this fairly simple, I think I watched some presentation or video of someone doing it.

我真的已经习惯并改变了我的心态对思维作出反应，ively。

I'm really have to get used to and change my mindset towards thinking React-ively.

只是寻找一个最佳实践方式，我可以解决它在一个真正的丑陋和笨重的方式，但我喜欢React.js因为它是如此简单。

Just looking for a best practice way, I could solve it in a really ugly and bulky way, but I like React.js because it's so simple.

推荐答案

按国家尽可能高的组件层次结构可能和工作，对一成不变的道具各级下面。这似乎是有道理的存储活动标签在标签组件，并产生了数据的菜单项（ this.props 在这种情况下），以减少code复制：

Push the state as high up the component hierarchy as possible and work on the immutable props at all levels below. It seems to make sense to store the active tab in your tab-component and to generate the menu items off data (this.props in this case) to reduce code duplication:

下面的例子中工作的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)
    );
  }
});

该菜单项可以从追加很少做预留了类名和揭露一个click事件：

The MenuItem could do very little aside from append a class name and expose a click event:

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.js标签开关类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！