Question

我正在尝试构建我的第一个React项目，目前我正在整理一个汉堡导航按钮，以及点击导航时出现的菜单。

我把它分成了两个部分;汉堡和MenuOverlay。两者的代码如下。

目前我有一个onClick on Hamburger在其上切换一个类，但是如何从该点击切换菜单？它隐藏着display：none;默认情况下。可能是一个非常基本的问题，所以道歉 - 仍然试图绕过React。

MenuOverlay

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

const MenuOverlay = () => {
    return (
        <div className="menuOverlay">
            <div className="innerMenu">
                <p><Link to="/">Home</Link></p>
                <p><Link to="/">About</Link></p>
                <p><Link to="/">Contact</Link></p>
            </div>
        </div>
    );
};

export default MenuOverlay;

汉堡包

import React, { Component } from 'react';

class Hamburger extends Component {
    constructor(props) {
        super(props);

        this.state = { active: '' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        var toggle = this.state.active === 'is-active' ? '' : 'is-active';
        this.setState({active: toggle});
    }

    render() {

        return (
            <button className={`hamburger hamburger--emphatic fadein one ${this.state.active}`} onClick={this.handleClick} type="button">
                <span className="homeMenuTextButton">Menu</span>
                <span className="hamburger-box">
                    <span className="hamburger-inner"></span>
                </span>
            </button>
        );
    }
}

export default Hamburger;

Answer 1

在最简单的形式中，您将拥有一个包装它们的容器组件并管理组件的状态。

<MenuContainer>
 <Hamburger />
 <MenuOverlay />
</MenuContainer>

在<MenuContainer>中，您的状态为active一些快速伪代码。

class MenuContainer extends React.Component {
  constructor() {
    super();

    this.state = { active: false} 
  }

  toggleMenu = () => {

  // function that will toggle active/false
    this.setState((prevState) => {
      active: !prevState.active
    });
  }


  render() {
    return ( 
      <div>
        <Hamburger active={this.state.active} onClick={this.toggleMenu} />
        <MenuOverlay active={this.state.active} />
      </div>
    )
  }
}

所以在汉堡包中你只需使用this.props.onClick来改变活动状态，然后在那些相应的组件中使用this.props.active的prop来确定应该应用哪些类等等。

Answer 2

鉴于一个元素不是另一个元素的父元素，您必须提取变量，将切换信息保持在元素链上，直到它位于一个公共位置。

即保持＆＃34;活跃＆＃34;在两个元素的祖先中的状态变量，并向汉堡提供道具中的回调，当被调用时，修改该祖先组件的状态。同时，也将活动状态变量传递给MenuOverlay作为道具，一切都应该协同工作。

有关详细信息，请参阅此处：

https://facebook.github.io/react/tutorial/tutorial.html#lifting-state-up

具体地，

如果要聚合来自多个子项的数据或让两个子组件相互通信，请向上移动状态以使其位于父组件中。然后父母可以通过道具将状态传递给孩子，这样子组件总是彼此同步并与父母同步。

React - 从另一个组件的onClick中切换显示一个组件

2 个答案: