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

我正在尝试构建我的第一个React项目，并且当前正在将汉堡导航按钮和单击导航时出现的菜单组合在一起。React - 从另一个组件的onClick切换显示一个组件

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

目前我有一个在汉堡切换一个类的onClick，但我怎么也从该点击切换菜单？它隐藏着显示：无;默认。可能是一个非常基本的问题，所以很抱歉 - 仍然试图让我的头脑围绕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;

来源

2017-01-26 Robkwood

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

<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道具来确定类应该应用什么，等

来源

2017-01-26 17:37:06 finalfreq

感谢你为这个。我有它的工作，但我不得不改变汉堡和MenuOverlay到基于类的组件。我是否正确？我只是有这种唠叨的感觉，他们应该是功能组件，我不想陷入坏习惯。 ** MenuContainer ** https://jsfiddle.net/xtgq6La0/ ** Hamburger ** https：// jsfiddle。净/ 4jd24t85/ ** ** MenuOverlay https://jsfiddle.net/5t2bsobc/ 再次感谢 – Robkwood

有两个问题考虑一类VS功能组件时，问：这是否元器件具有任何国家或做我需要使用任何组件生命周期方法。如果其中任何一个都是真的，则使用类组件系统，否则只使用纯功能组件。在这种情况下，我会说你是正确的做出这些功能组件 – finalfreq

鉴于一个元素不是另一个元素的父母，你将不得不拉起变量保持拨动信息了直到它存在于一个共同的地方。

即，保持“活跃”状态变量中的两个要素的祖先，并提供到汉堡中，调用它时，修改该祖先组件的状态道具的回调。同时，还要将活动状态变量传递给MenuOverlay作为道具，并且所有内容都应该一起工作。

具体来说，

当你想从多个孩子汇总数据，或有两个子组件相互通信，移动状态下向上，以便它在父组件中生存。然后父母可以通过道具将状态传递回儿童，以便孩子的组件始终彼此同步并与父母同步。

来源

2017-01-26 17:33:19

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

回答

相关问题