Как отрендерить Component By Tap, реагирующий на прокручивание просмотров? - PullRequest
Новая
       77

Как отрендерить Component By Tap, реагирующий на прокручивание просмотров?

0 голосов
/ 06 августа 2020

Я использую 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, The Problem is when this component loads it loads all other tabs including the API Call even without taping any other tap

Вкратце: все вкладки загружаются один раз, когда этот компонент загружает

Поэтому я хочу, чтобы каждый компонент загружался независимо, когда вкладка i, а другой компонент должен отключаться, когда я нажимаю определенное нажатие

...