问反应可滑动-如何包装一个<tr>？

EN

import React, { Component } from "react";
import styled from "styled-components";
import Header from "components/Header";
import Navbar from "components/Navbar";
import SideMenu from "components/SideMenu";
import MainContent from "components/Content";

const AppWrapper = styled.section`
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 70px auto;
  @media (max-width: 884px) {
    grid-template-columns: 60vw auto;
  }
  @media (min-width: 885px) {
    grid-template-columns: 200px auto;
  }
`;

class App extends Component {
  swipe = {
    firstPositionX: null,
    firstPositionY: null,
    positionDifferenceX: null,
    positionDifferenceY: null
  };
  constructor(props) {
    super(props);
    this.state = {
      sideMenuDisplay: window.innerWidth >= 885 ? true : false
      // movement: -60
    };
  }



  componentDidMount() {
    window.addEventListener("resize", this.updateSideMenuDisplay);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateSideMenuDisplay);
  }

  updateSideMenuDisplay = () => {
    this.setState({ sideMenuDisplay: window.innerWidth >= 885 ? true : false });
  };

  toggleSideMenu = () => {
    this.setState(prevState => ({
      sideMenuDisplay: !prevState.sideMenuDisplay
    }));
  };



  handleTouchStart = e => {
    this.swipe.firstPositionX = e.touches[0].screenX;
    this.swipe.firstPositionY = e.touches[0].screenY;
  };

  handleTouchMove = e => {
    this.swipe.positionDifferenceX =
      e.touches[0].screenX - this.swipe.firstPositionX;
    this.swipe.positionDifferenceY =
      e.touches[0].screenY - this.swipe.firstPositionY;
  };

  handleTouchEnd = () => {
    if (Math.abs(this.swipe.positionDifferenceY) <= 150) {
      this.setState(
        prevState => ({
          sideMenuDisplay:
            prevState.sideMenuDisplay === false
              ? this.swipe.positionDifferenceX > 50
              : !(this.swipe.positionDifferenceX < -50)
        }),
        () => {
          this.swipe.firstPositionX = null;
          this.swipe.positionDifferenceX = null;
          this.swipe.firstPositionY = null;
          this.swipe.positionDifferenceY = null;
        }
      );
    }
  };

  render() {
    const sideMenuDisplay = this.state.sideMenuDisplay;
    return (
      <AppWrapper>
        <Header display={sideMenuDisplay} />
        <Navbar onClick={this.toggleSideMenu} display={sideMenuDisplay} />
        <SideMenu

  }
}

export default App;  display={sideMenuDisplay}
          onTouchStart={this.handleTouchStart}
          onTouchMove={this.handleTouchMove}
          onTouchEnd={this.handleTouchEnd}
        />
        <MainContent
          display={sideMenuDisplay}
          onTouchStart={this.handleTouchStart}
          onTouchMove={this.handleTouchMove}
          onTouchEnd={this.handleTouchEnd}
        />
      </AppWrapper>
    );
  }
}

export default App;

import React, { Component } from "react";
import SideMenuElement from "./SideMenuElement";
import MembersIcon from "./MembersIcon";
import DashboardIcon from "./DashboardIcon";
import {
  SideMenuSection,
  SideMenuItems,
  SideMenuElementLogo,
  AppMobileLogo
} from "./styles";
import logoIcon from "static/logo@3x.png";

class SideMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedItem: "dashboard" };
  }

  selectItem = item => {
    this.setState({ selectedItem: item });
  };

  render() {
    const selectedItem = this.state.selectedItem;

    return (
      <SideMenuSection
        display={`${this.props.display}`}
        onTouchStart={this.props.onTouchStart}
        onTouchMove={this.props.onTouchMove}
        onTouchEnd={this.props.onTouchEnd}
      >
        <SideMenuItems>
          <SideMenuElementLogo>
            <AppMobileLogo src={logoIcon} alt="App Logo" />
          </SideMenuElementLogo>

          <SideMenuElement
            item="dashboard"
            icon={DashboardIcon}
            selected={selectedItem === "dashboard"}
            onClick={this.selectItem}
          >
            Dashboard
          </SideMenuElement>

          <SideMenuElement
            item="members"
            icon={MembersIcon}
            selected={selectedItem === "members"}
            onClick={this.selectItem}
          >
            Members
          </SideMenuElement>
        </SideMenuItems>
      </SideMenuSection>
    );
  }
}

export default SideMenu;

import Swipe from 'react-swipe-component';

<Swipe key={index} nodeName="tbody" onSwipeRight={() => this.props.onRowSwipe(row)}>
  {RowComp}
</Swipe>