javascript - 如何在 React 中按下按钮来切换元素？

Question

我花了 3 天的时间来寻找如何切换我的移动导航按钮来切换我的移动菜单。我是 React 新手，可以使用 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;

菜单子(monad)组件:

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

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

Answer 1

onClick 由 MenuButton 组件处理，该组件依次调用作为属性传递的 toggleMenu 函数。我将传递 toggleMenu 作为 MenuButton 的属性:

 <MenuButton toggleMenu={this.toggleMenu} />