React中实现tab切换

Posted 2021-08-13 老张在线敲代码

代码比较简单，并不复杂

import React, { Component } from "react";

class Taball extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
    };
  }
  handleTab(index) {
    this.setState({
      current: index,
    });
  }
  classFn(index, class1, class2) {
    //如果符合当前就要多一个class，如果不符合当前就没有对应的class
    let { current } = this.state;
    return current === index ? class1 : class2;
  }
  componentDidMount() {
    this.handleTab(1);
  }
  render() {
    return (
      <div>
        <h1>tab切换</h1>
        <div className="tab_con2">
          <ol>
            <li
              onClick={() => {
                this.handleTab(1);
              }}
              className={this.classFn(1, "cur", "")}
            >
              菜单一
            </li>
            <li
              onClick={() => {
                this.handleTab(2);
              }}
              className={this.classFn(2, "cur", "")}
            >
              菜单二
            </li>
            <li
              onClick={() => {
                this.handleTab(3);
              }}
              className={this.classFn(3, "cur", "")}
            >
              菜单三
            </li>
          </ol>
          <ul>
            <li className={this.classFn(1, "current", "")}>内容一</li>
            <li className={this.classFn(2, "current", "")}>内容二</li>
            <li className={this.classFn(3, "current", "")}>内容三</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Taball;