用react实现tab切换

在react中我们应该如何去实现tab切换？首先我们应该知道tab切换的思路是什么

思路：

HTML+CSS tab切换

1、简单来实现基础结构

2、可以通过修改HTML 对应class名来实现任意改变(手动实现tab切换)

js

1、简单把对应手动改成js 默认修改

this.state current

2、直接方法提炼(传参)

我们的代码如下：

import React, { Component } from 'react'
class View extends Component{
  constructor(props) {
    super(props)
    this.state = {
      tab: {
        current: 1
      }
    }
  }
  tabSwitch(index=1) {
    this.setState({
      tab: {
        ...this.state.tab,
        current:index
      }
    })
  }
  componentDidMount() {
    this.tabSwitch()
  }
  render() {
    const {tab} = this.state
    return (
      <React.Fragment>
        <div className="tab_box">
          <h3>tab切换</h3>
          <ul>
            <li onClick={() => {this.tabSwitch(1)}} className={tab.current ===1 ? 'cur':''}>