Javascript 如何在React中使用按钮切换元素？

我已经搜索了3天，想知道如何切换我的移动导航按钮来切换我的移动菜单。我是新手，可以用jQuery轻松地做出反应，但我不想使用jQuery。我逐行复制了一个关于如何显示或隐藏元素的示例。我不能让它工作。任何帮助都将不胜感激。我使用带有React的样式化组件

按钮子组件：

import React, { Component } from 'react';

class MenuButton extends Component {
  render() {
    return (
      <Button onClick={this.props.toggleMenu}>
        <Menu></Menu>
      </Button>
    )
  }
}

export default MenuButton;

import React，{Component}来自'React'；
类菜单按钮扩展组件{
render（）{
返回(
)
}
}
导出默认菜单按钮；

菜单子组件：

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class Menu extends Component {
  render() {
    return (
      <OffCanvasMenu>
        <Title>Menu</Title>
        <Nav>
          <NavLinks><Link to='/'>Home</Link></NavLinks>
          <NavLinks><Link to='/about'>About</Link></NavLinks>
          <NavLinks><Link to='/interactive'>Interactive</Link></NavLinks>
          <NavLinks><Link to='/ideas'>Ideas</Link></NavLinks>
          <NavLinks><Link to='/contact'>Contact</Link></NavLinks>
        </Nav>
      </OffCanvasMenu>
    )
  }
}

export default Menu;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类菜单扩展组件{
render（）{
返回(
菜单
家
关于
互动的
思想
接触
)
}
}
导出默认菜单；

包含所有状态的菜单容器组件：

import React, { Component } from 'react';

import Menu from './Menu';
import MenuButton from './MenuButton';

class MenuContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    }
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    const { active } = this.state;
    this.setState({
      //toggle value of `active`
      active: !active
    });
  }

  render() {
    return (
      <div>
        <MenuButton onClick={this.toggleMenu}/>
        {this.state.active && <Menu/>}
      </div>
    )
  }
}

export default MenuContainer;

import React，{Component}来自'React'；
从“./菜单”导入菜单；
从“/MenuButton”导入菜单按钮；
类MenuContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动：错误
}
this.toggleMenu=this.toggleMenu.bind（this）；
}
切换菜单（）{
const{active}=this.state；
这是我的国家({
//切换“活动”的值`
活动：！活动
});
}
render（）{
返回(
{this.state.active&&}
)
}
}
导出默认菜单容器；

---

我可以在ReactDev tools中看到一个复选框，显示MenuContainer具有状态，但当单击按钮时，它不会切换状态。

onClick

由

MenuButton

组件处理，该组件依次调用作为属性传递的

toggleMenu

函数。我将

toggleMenu

作为

MenuButton

的属性传递：

 <MenuButton toggleMenu={this.toggleMenu} />

---

onClick

由

MenuButton

组件处理，该组件依次调用作为属性传递的

toggleMenu

函数。我将

toggleMenu

作为

MenuButton

的属性传递：

 <MenuButton toggleMenu={this.toggleMenu} />