Reactの私のスライドメニューは機能しませんか？

Question

は、tutorialに従っていますが、明らかに正しく動作しません。ボタンを押すと、右側にメニューが表示されますが、このように表示されます。何が間違っていますか？

SideBar.js

にMenuContainerクラスの変更がすべてのクラスがこれは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; 
} 

の内側にありますあなたがそれをクリックするとどのように表示されるかのイメージ。

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