Tab class switch with React.js

Question

So, I have a tab-component that has 3 elements:

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

And in .render of MenuItem :

 React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick, React.DOM.a( href: "#" [e-mail] , @props.uid) ) 

Each time I click on an element, the underlying router is called, which then calls the tab-component , which in turn calls the page-component .

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

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

I know a CSS trick in which you can use the data- attribute and apply different styles to the true or false attribute.

The backbone router has already received the uid variable and invokes the desired page. I just don't know how to best switch classes between tabs, because only one can be active at a time.

Now I can save some record about which tab was selected, and switch them, etc. But React.js already has this write function.

@handleClick You see, I don’t even want to use it, because the router must specify the tab-component , which should give className: '.active' And I want to avoid jQuery, because React.js does not need direct manipulation of the DOM.

I tried some things with @state, but I know for sure that there is a really elegant way to achieve this rather simple, I think I watched a presentation or videos that someone did.

I really need to get used to and change my thinking on thoughts of reactivity.

Just looking for a way to best practice, I could solve it in a very ugly and cumbersome way, but I like React.js because it is so simple.

Answer 1

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

Working JSFiddle from the example below + Backbone Router: 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 can do very little, except add the class name and display the 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}) ) ); } }); 

Answer 2

You can try response-router-active-componentet - if you work with navbar navigators.

Answer 3

You can try to click on the menu item handler element before the parent component. I'm actually trying to do something similar to what you are doing. I have a top-level menu component that I want to use the menu model to display the menu bar and items. Other components can contribute to the top menu bar by adding to the menu bar ... simply by adding a top level menu, submenu, and click handler (which is located in the component adding the menu). The top-level component will then display the user interface in the menu and when something is clicked, it will use the clickback component of the callback component to call. Using the menu model, I can add things like css styles for actice / mouseover / inactive etc., as well as icons, etc. The top-level menu component can then decide how to display items, including mouse, clicks, etc. At least I think he can ... still work on this since I'm new to ReactJS.