在选定的选项卡上激活添加类激活

Question

我有以下内容:

var Tab = React.createClass({
    getInitialState: function(){
        return {
          selected:''
        }
    },
    activateTab: function(e) {
        e.preventDefault();
        $('.navigation--active').removeClass('navigation--active');
        this.setState({selected  : true});
    },
    render: function() {
        var isActive = this.state.selected === true ? 'navigation--active': '';
        return (
            <li onClick={this.activateTab} className={isActive}>
                <p>
                    {this.props.content}
                </p>
            </li>
        );
    }
});

var Tabs = React.createClass({
    render: function() {
        var tabs = [],
            total = this.props.data.points.total,
            handleClick = this.handleClick;
        total.forEach(function(el, i){
            tabs.push(
                <Tab content = {el.name} 
                     key = {i}/>
            );
        });
        return (
            <ul className="navigation">
                {tabs}
            </ul>
        );
    }
});

但是只有在每个选项卡上单击一次时才有效,如果在同一个选项卡上第二次单击该类,则不再添加该类

Answer 1

在这种情况下,最好将状态管理移动到父组件Tabs,并将只需要检测类名称或在父级中设置新状态的子项传递给子级

var Tab = React.createClass({
  render: function() {
    return <li 
      className={ this.props.isActive ? 'navigation--active': '' }
      onClick={ this.props.onActiveTab }
    >
      <p>{ this.props.content }</p>
    </li>
  }
});

var Tabs = React.createClass({
  getInitialState: function() {
    return { selectedTabId: 1 }
  },
  
  isActive: function (id) {
    return this.state.selectedTabId === id;
  },
  
  setActiveTab: function (selectedTabId) {
    this.setState({ selectedTabId });
  },
  
  render: function() {
    var total = this.props.data.points.total,
    	tabs = total.map(function (el, i) {
          return <Tab 
            key={ i }
            content={ el.name } 
            isActive={ this.isActive(el.id) } 
            onActiveTab={ this.setActiveTab.bind(this, el.id) }
          />
        }, this);
                
    return <ul className="navigation">
     { tabs }
    </ul>
  }
});

const data = {
  points: {
    total: [
      { id: 1, name: 'tab-1', text: 'text' },
      { id: 2, name: 'tab-2', text: 'text-2' },
      { id: 3, name: 'tab-3', text: 'text-2' }
    ]
  }
}

ReactDOM.render(
  <Tabs data={ data } />,
  document.getElementById('container')
);

.navigation {}

.navigation--active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>