我在 React 中的滑动菜单不起作用？

Question

按照tutorial但显然没有正常工作，按下按钮应该出现在右侧的菜单但它以这种方式出现，有什么问题吗？

MenuContainer class 将其更改为 SideBar.js

所有class都在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

您改变了 SideBar 组件的状态。 Sidebar 组件将状态作为 prop 向下传递给 Menu。当您改变此状态时，它应该使用新值重新呈现 Menu 组件。

您的菜单 class 看起来会更好：

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

我在 React 中的滑动菜单不起作用？

My sliding menu in React does not work?

animation

slide

reactjs