1

我正在使用react-swipeable-views，@material-ui/core/Tab并且@material-ui/core/Tabs

我正在根据选项卡调整视图这是我的代码

import React, { Component } from "react";
import Nav from "../Nav";
import Footer from "../Footer";
import TraineeAccount from "./TraineeAccount";
import TraineeCourses from "./TraineeCourses";
import TraineeCoursesFav from "./TraineeCoursesFav";
// import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
// import ViewSlider from 'react-view-slider';
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import SwipeableViews from "react-swipeable-views";
import { url, headers } from "../../common/config";
import axios from "axios";

export default class TraineeDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTabId: "1",
      index: 0,
    };
  }
  componentDidMount = () => {
    window.scrollTo(0, 0);
  };

  activeTab = (event) => {
    this.setState({ activeTabId: event.currentTarget.dataset.id });
  };
  handleChange = (event, value) => {
    // alert(value)
    this.setState({
      index: value,
    });
  };
  handleChangeIndex = (index) => {
    this.setState({
      index,
    });
  };
  render() {
    const { index } = this.state;
    const { field_user_full_name } = this.props.traineeUser;

    return (
      <div className="dashboard">
        <Nav />
        <div className="container" id="center-dashboard">
          <div className="row">
            <div className="col-9">
              <div className="row animated fadeInDown">
                <div className="col-2">
                  <img
                    // className="round_corner_img"
                    src={require("../../img/icons/user2.svg")}
                    alt="user icon"
                  />
                </div>
                <div
                  className="col-4 text-right"
                  style={{ paddingTop: "35px" }}
                >
                  <h4 className="theme_color">{field_user_full_name}</h4>
                  {/* <span style={{ display: "block" }}>
                    <i className="fa fa-calendar"></i> 6 feb 2020
                  </span> */}
                </div>
              </div>
            </div>
            <div
              className="col-3 animated fadeInDown no_border  nav-tabs justify-content-center no_padding"
              className="myTab"
            >
              <Tabs value={index} fullwidth="true" onChange={this.handleChange}>
                <Tab disableRipple label="حسابي" />
                <Tab disableRipple label="دوراتي" />
                <Tab disableRipple label="المفضلة" />
              </Tabs>
            </div>
          </div>
          <hr />
        </div>

        <div className="container margin_top_small">
          <div className="tab-content " id="myTabContent" style={styles.root}>
            <SwipeableViews
              index={index}
              onChangeIndex={this.handleChangeIndex}
              axis="x-reverse"
            >
              <div style={styles.slide}>
                <TraineeAccount currentUserInfo={this.props.traineeUser} />
              </div>

              <div style={styles.slide}>
                <TraineeCourses />
              </div>
              
              <div style={styles.slide}>
                <TraineeCoursesFav />
              </div>
            </SwipeableViews>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}
const styles = {
  root: {
    // Simulates a global right-to-left direction.
    direction: "rtl",
    textAlign: "start",
  },
  slide: {
    direction: "rtl",
    margin: "0 80px 0 80px",
  },
};

每个组件都有一个独立的带有 API 调用的 UI，The Problem is when this component loads it loads all other tabs including the API Call even without taping any other tap

简而言之：加载此组件时加载一次所有选项卡

所以我希望每个组件在我选项卡时独立加载，而当我按下某个水龙头时其他组件应该卸载

4

0 回答 0