react选项卡

• 请求的是ajax网址上的数据

 class Iu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      //存储数据的地方
      newIu: [],
    };
  }
  async getApi(url, cfg, headers) {
    let data = await axios.get(
      url,
      { params: cfg },
      {
        headers: headers,
      }
    );
    return data;
  }
  getIu(iu) {
    // const cfg = this.state.mediareports;
    const cfg = {
      page_number: iu,
      page_size: "10",
    };
    this.getApi("/home/mediareports", cfg, {}).then((res) => {
      console.log(res.data.data);
      this.setState({
        newIu: res.data.data,
      });
    });
  }
  tapFn(e, index) {
    this.setState({
      current: index,
    });
    this.getIu(index);
  }
  componentDidMount() {
    this.getIu(1);
  }

  render() {
    const list = this.state.newIu.map((val) => (
      <li key={val.id}>
        <a href={val.jump_url}>{val.main_title}</a>
        <span>{val.source}</span>
        <span>{val.sourceData}</span>
      </li>
    ));
    return (
      <React.Fragment>
        <div className="tap_box">
          <ul>
            <li
              onClick={(e) => this.tapFn(e, 1)}
              className={this.state.current === 1 ? "cur" : ""}
            >
              新闻一
            </li>
            <li
              onClick={(e) => this.tapFn(e, 2)}
              className={this.state.current === 2 ? "cur" : ""}
            >
              新闻二
            </li>
            <li
              onClick={(e) => this.tapFn(e, 3)}
              className={this.state.current === 3 ? "cur" : ""}
            >
              新闻三
            </li>
          </ul>
          <div className="tap_box_con">
            <div
              className={
                this.state.current === 1
                  ? "tab_con_list current"
                  : "tab_con_list"
              }
            >
              这是div1
            </div>
            <div
              className={
                this.state.current === 2
                  ? "tab_con_list current"
                  : "tab_con_list"
              }
            >
              这是div2
            </div>
            <div
              className={
                this.state.current === 3
                  ? "tab_con_list current "
                  : "tab_con_list"
              }
            >
              这是div3
            </div>
          </div>
          <div className="tap_box_con">
            <ol>{list}</ol>
          </div>
        </div>
      </React.Fragment>
    );
  }
}