react实现Tab栏功能

实现思路：与vue的实现思路差不多，通过一个变量控制实现动态赋予类名，实现鼠标悬停添加样式以及内容的显示与隐藏

下面直接上代码

.jsx文件

import React, { Component } from "react";
import "./MyTabs.css";

export default class MyTabs extends Component {
  //控制状态的变量
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }
  //事件处理函数
  MouseEnterFn(index) {
    this.setState({
        num:index
    })
  }
  render() {
    //用于遍历渲染的数组
    let TabArr = ["首页", "新闻", "购物", "其他"];
    let ContentArr = [
      "我是首页内容",
      "我是一条新闻喔",
      "购物栏,一个你只能看的地方",
      "其他页面",
    ];

    return (
      <div>
        <div className="BoxContent">
          <ul className="uls">
            //循环遍历
            {TabArr.map((item, index) => (
              <li
                className={[
                  "Tab",
                  this.state.num == index ? "Tab_active" : "",
                ].join(" ")}
                key={index}
                onMouseEnter={this.MouseEnterFn.bind(this, index)}
              >
                {item}
              </li>
            ))}
          </ul>
          <div className="TabContent">
            {ContentArr.map((item, index) => (
              <div
                className={[
                  "contentBox",
                  this.state.num == index ? "content_active" : "",
                ].join(" ")}
                key={index}
              >
                {item}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

.css文件

*{
    padding: 0;
    margin: 0;
}
.BoxContent{
    margin: auto;
    border-radius: 7px;
    width: 400px;
    border: 1px solid #000;
    overflow: hidden;
}
li{list-style: none;cursor: pointer;}
.uls{
    display: flex;background-color:turquoise;
}
.Tab{
    padding: 10px 20px;
}
.Tab_active{
    border: none;
    background-color: #fcf;
    position: relative;
}
.Tab_active::after{
    content: '';
    display: block;
    width: 72px;
    height: 1px;
    background-color: #fcf;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.contentBox{
    width: 400px;
    height: 200px;
    box-sizing: border-box;
    border-top: 1px solid #000;
    display: none;
    background-color: #fcf;
}
.content_active{
    width: 400px;
    height: 200px;
    display: block;
}

实现效果：