tab切换---react

直接上代码

import React from 'react'; import './tabChange.css' class TabChange extends React.Component{ constructor(props) {      super(props);      this.state = {      tab: {      current_index: 0,      },      }; } tabClick = (num) => { this.setState({ tab: Object.assign( this.state.tab, { current_index: num, }, ), }); } render() { const state = this.state;         const currentIndex = state.tab.current_index; return( <div className="settle-wrap"> <ul className="settle-header"> <li onClick={() => this.tabClick(0)} className={currentIndex === 0 ? 'active' : ''}>first</li> <li onClick={() => this.tabClick(1)} className={currentIndex === 1 ? 'active' : ''}>second</li> <li onClick={() => this.tabClick(2)} className={currentIndex === 2 ? 'active' : ''}>third</li> </ul> <div className={currentIndex === 0 ? '' : 'hidden'}>                     第一帧                 </div>                 <div className={currentIndex === 1 ? '' : 'hidden'}>                     第二帧                 </div>                 <div className={currentIndex === 2 ? '' : 'hidden'}>                     第三帧                 </div> </div> ); } }

.settle-wrap {     background: #f7f7f7; } .hidden {     display: none; } .settle-header {     border-bottom: 1px solid #f2f2f2;     height: 50px;     background: #f7f7f7; } li {     display: inline-block;     margin: 0 0 0 48px;     padding-bottom: 4px;     font-size: 20px;     color: #23344b;     cursor: pointer; } li.active {     border-bottom: 2px solid #2c9fc0;     color: #2c9fc0; } li:first-child {     margin-left: 0; }