Reactjs 我在React中的滑动菜单不工作？

按照，但显然不工作，因为它应该按下按钮，应该出现在右侧的菜单，但它出现在这样的方式，什么是错误的

MenuContainer类将其更改为SideBar.js

所有类都在侧边栏.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>
    );
  }
}

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

这是当您单击它时显示的图像

---

您可以从侧边栏组件中修改状态。边栏组件将状态作为道具传递到菜单。当您改变此状态时，它应该使用新值重新呈现菜单组件

您的菜单类看起来更像：

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.Component{
render（）{
const{menuVisibility}=this.props
返回(
);
}

Hi Frank！我也有同样的错误，你可以在下面的链接中检查我的代码，请帮帮我！你好…他是arreglado muchas cosas.Voy medio borracho asi que no me acuerdo de la mitad.Pero en JSFIDLE no puedes usar ES6导入/导出，初级错误；segundo错误，hay que que inclusir las librerias react y reactdom（外部资源），第三个错误，faltavan varios组件的定义为：容器、行、列；组件的联合国框架（链接功能）是什么当前位置：原则上的反应是什么？是什么原因？是什么原因造成的