Mein Sliding-Menü in React funktioniert nicht?

Question

folgen Sie der tutorial aber scheinbar funktioniert nicht wie es sollte, durch Drücken der Taste sollte das Menü auf der rechten Seite erscheinen, aber es erscheint auf diese Weise, was ist falsch?

die MenuContainer Klassenänderung es SideBar.js

alle Klassen sind innerhalb SideBar.js

import React, { Component } from "react"; 

class SideBar extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { visible: false }; 
     this.handleMouseDown = this.handleMouseDown.bind(this); 
     this.toggleMenu = this.toggleMenu.bind(this); 
    } 

    toggleMenu() { 
     this.setState({ 
      visible: !this.state.visible 
     }); 
    } 

    handleMouseDown(e) { 
     this.toggleMenu(); 

     console.log("clicked"); 
     e.stopPropagation(); 
    } 
    render() { 
    return (

    <div> 

    <MenuButton handleMouseDown={this.handleMouseDown}/> 
    <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/> 
     <div> 
     <div> 
      <p>Can you spot the item that doesn't belong?</p> 
      <ul> 
      <li>Lorem</li> 
      <li>Ipsum</li> 
      <li>Dolor</li> 
      <li>Sit</li> 
      <li>Bumblebees</li> 
      <li>Aenean</li> 
      <li>Consectetur</li> 
      </ul> 
     </div> 
     </div> 

     </div> 
    ); 
    } 
} 
export default SideBar; 

class MenuButton extends React.Component { 
    render() { 
    return (
     <button className="roundButton" 
       onMouseDown={this.props.handleMouseDown}></button> 
    ); 
    } 
} 


class Menu extends React.Component { 
    render() { 
    var visibility = "hide"; 

    if (this.props.menuVisibility) { 
     visibility = "show"; 
    } 

    return (
     <div className="flyoutMenu" 
      onMouseDown={this.props.handleMouseDown} 
      className={visibility}> 
     <h2><a href="#">Home</a></h2> 
     <h2><a href="#">About</a></h2> 
     <h2><a href="#">Contact</a></h2> 
     <h2><a href="#">Search</a></h2> 
     </div> 
    ); 
    } 
} 

und meine styles.scss

.roundButton { 
    background-color: #96D9FF; 
    margin-bottom: 20px; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    border: 10px solid #0065A6; 
    outline: none; 
    transition: all .2s cubic-bezier(0, 1.26, .8, 1.28); 
} 
.roundButton:hover { 
    background-color: #96D9FF; 
    cursor: pointer; 
    border-color: #003557; 
    transform: scale(1.2, 1.2); 
} 

.roundButton:active { 
    border-color: #003557; 
    background-color: #FFF; 
} 

.flyoutMenu { 
    width: 100vw; 
    height: 100vh; 
    background-color: #FFE600; 
    position: fixed; 
    top: 0; 
    left: 0; 
    transition: transform .3s 
       cubic-bezier(0, .52, 0, 1); 
    overflow: scroll; 
    z-index: 1000; 
} 

.flyoutMenu.hide { 
    transform: translate3d(-100vw, 0, 0); 
} 

.flyoutMenu.show { 
    transform: translate3d(0vw, 0, 0); 
    overflow: hidden; 
} 

Dies ist das ist Bild, wie es angezeigt wird, wenn Sie darauf klicken.

image

Answer 1

Sie den Zustand von SideBar Komponente mutieren. Sidebar-Komponente übergibt den Status als Prop an Menü. Wenn Sie diesen Status mutieren, sollte die Menükomponente mit dem neuen Wert erneut gerendert werden.

Ihr Menü Klasse würde etwas besser aussehen:

class Menu extends React.Component { 
    render() { 
    const { menuVisibility } = this.props 

    return (
     <div className="flyoutMenu" 
      onMouseDown={this.props.handleMouseDown} 
      className={menuVisibility ? 'show' : 'hide'}> 
     <h2><a href="#">Home</a></h2> 
     <h2><a href="#">About</a></h2> 
     <h2><a href="#">Contact</a></h2> 
     <h2><a href="#">Search</a></h2> 
     </div> 
    ); 
    }