React tab 切换

打开文件

import React, { Component } from "react";
import Hello from "../components/Hello";
import { Button } from "antd";

export default class Gong extends Component {
  state = {
    data: ["数据11", "数据22", "数据333"],
    addressJobs: [
      {
        address: "测试11111",
        jobs: ["测试11111", "测试11111", "测试11111", "测试11111"],
      },
      {
        address: "测试2222",
        jobs: ["2222", "22222", "22223", "22224"],
      },
      {
        address: "测试333333",
        jobs: ["3333331", "3333332", "3333333", "3333334"],
      },
     
    ],
    jobssss: [],
  };

  // 初始化的时候选中第一个
  // 组件渲染后调用钩子
//   active  默认的样式
  componentDidMount() {
    // 获取所有指定类名
    document.getElementsByClassName("adress-item")[0].className =
      "adress-item active";
    this.setState({
      jobssss: this.state.addressJobs[0].jobs,
    });
  }
  // tab切换
  adressNavClick = (val) => {
    document.getElementsByClassName("adress-item")[val].className =
      "adress-item active";
    this.state.addressJobs.forEach((item,indexs) => {
         console.log(item,"el, item")
         console.log(indexs)
      if (indexs === val) {
        this.setState({
          jobssss: item.jobs,
        });
      } else {
        document.getElementsByClassName("adress-item")[indexs].className =
          "adress-item";
      }
    });
  };

  render() {
    return (
      <div>
        {/* < Button   > Primary Button </Button>
              <Button  type = "primary"> Default Button </Button> */}
        <div className="recruit-content">
          <ul className="adress-nav">
            {this.state.addressJobs
              ? this.state.addressJobs.map((el, index) => {
                  return (
                    <li
                      className="adress-item"
                      key={index}
                      onClick={() => {
                        this.adressNavClick(index);
                      }}
                    >
                      {el.address}
                    </li>
                  );
                })
              : ""}
          </ul>
          <div className="jobs-wrapper">
            <ul className="jobs-list clearfloat">
              {this.state.jobssss
                ? this.state.jobssss.map((el, index) => {
                    return (
                      <li className="jobs-item" key={index}>
                        {el}
                      </li>
                    );
                  })
                : ""}
            </ul>
          </div>
        </div>
        <div> 二级组件显示了吗 </div>
        <Hello shuju={this.state.data} />{" "}
      </div>
    );
  }
}

css

.adress-nav {
    width: 300px;
    height: 50px;
    /* border: 1px solid firebrick; */
    display: flex;
    justify-content: space-around;
}
.adress-nav  .adress-item{
    padding: 0 30px;
    border: 1px solid rgb(95, 98, 95);

}
.adress-nav  .active {
    padding: 0 30px;
    border: 2px solid rgb(143, 13, 63);
}