lundi 9 novembre 2015

setState vs refs in react.js

I created tabs in react and and now on click I have to change the class of the tabs the tabs classes may be as follows:

1:active
2:previousActive
3:alreadySelected

On click of a tab class become active and check whether it is selected before or not using alreadySelected class and active class from the last active tab is remove and if it is not alreadySelected then add alreadySelected.

Code of one tab in react:

var TabBody = React.createClass({
    getInitialState: function() {
        return {
            class: 'tabBody tab activeTab'
        }
    },
    render: function() {
        a.tabBody = this;
        return (React.createElement('div', {
            className: this.state.class,
            ref: 'body',
            onClick: handleTabClick
        },
        React.createElement('span', {}, "Body"))
        );
      }
});

In order to change the class of the tabs I am doing in two ways and want to know which is effective. Code style one:

 var bodyClass = (a.tabBody.state.class).split(' ');
 var sleeveClass = (a.tabSleeve.state.class).split(' ');
 var neckClass = (a.tabNeck.state.class).split(' ');
 if (data === 'tabBody') {
     bodyClass.push('activeTab');
     var str1 = program.arrayToString(bodyClass);
     Interfaces.tabBody.setState({
         class: str1
     });
 }

Code Style 2

a.tabBody.refs.body.classList.remove('activeTab');
a.tabBody.refs.body.classList.add('tabPreviewComplete');
a.tabSleeve.refs.body.classList.add('activeTab');

Which style is good for doing this and why?

Aucun commentaire:

Enregistrer un commentaire