IT技术 - react.js 中的 setState 与 refs - 吾爱随笔录

我在react中创建了选项卡，现在单击我必须更改选项卡的类，选项卡类可能如下：

1:active
2:previousActive
3:alreadySelected

单击选项卡类成为active并检查它是否在使用alreadySelected类之前被选中，并且active最后一个活动选项卡中的类被删除，如果没有，alreadySelected则添加alreadySelected。

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"))
        );
      }
});

为了更改选项卡的类别，我正在通过两种方式进行操作，并想知道哪种方式有效。代码风格一：

 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
     });
 }

代码样式 2

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

哪种风格适合这样做，为什么？