React의 내 슬라이딩 메뉴가 작동하지 않습니까?

Question

tutorial을 따라 가야하지만 분명히 제대로 작동하지 않습니다. 버튼을 눌러 오른쪽에 메뉴가 나타나야하지만이 방법으로 나타납니다. 무엇이 잘못 되었나요? 모든 클래스는 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> 
    ); 
    } 
} 

내 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; 
} 

이가되어 있습니다

SideBar.js

에

는

MenuContainer 수준의 변화를 그것을 클릭했을 때 어떻게 표시되는지에 대한 이미지.

image

Answer 1

당신은 사이드 바 구성 요소의 상태를 돌연변이. 사이드 바 구성 요소는 상태를 메뉴로 소품으로 전달합니다. 이 상태를 변경하면 Menu 구성 요소가 새 값으로 다시 렌더링됩니다.

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> 
    ); 
    }