React - Umschalten der Anzeige einer Komponente aus dem onClick einer anderen Komponente

Question

Ich versuche mein erstes React-Projekt zu erstellen und stelle gerade eine Burger-Nav-Schaltfläche zusammen und ein Menü, das erscheint, wenn ich auf das Nav klicke.

Ich habe dies in zwei Komponenten aufgeteilt; Hamburger und MenuOverlay. Der Code für beide ist unten.

Momentan habe ich einen onClick auf Hamburger, der eine Klasse darauf schaltet, aber wie würde ich auch das Menü von diesem Klick umschalten? Es ist mit Display versteckt: keine; standardmäßig. Wahrscheinlich eine sehr grundlegende Frage, also Entschuldigung - immer noch versucht, meinen Kopf um React zu bekommen.

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; 

Hamburger

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

In der einfachsten Form haben Sie eine Container-Komponente, die beide umschließt und den Zustand der Komponenten verwaltet.

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

Und in <MenuContainer> würden Sie einen Zustand der active einige schnelle Pseudo-Code haben.

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

so in Hamburger würden Sie nur die this.props.onClick verwenden den Zustand aktiv zu verändern und dann in die entsprechenden Komponenten, die die Stütze der this.props.active verwenden, um zu bestimmen, welche Klassen angewendet werden sollen usw.

Answer 2

Da ein Element nicht das Elternteil eines anderen Elements ist, werden Sie die Variable zu ziehen, haben die Toggle-Informationen halten die Kette von Elementen, bis sie an einem gemeinsamen Ort liegt.

Das heißt, halten Sie die "aktive" Statusvariable in einem Vorfahren der beiden Elemente und bieten Sie dem Hamburger einen Callback in den Requisiten, die, wenn sie aufgerufen werden, den Zustand dieser Vorgängerkomponente ändert. Übergeben Sie gleichzeitig die aktive Statusvariable an das MenuOverlay als Prop, und alles sollte zusammen funktionieren.

Sehen Sie hier für weitere Informationen:

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

Insbesondere

Wenn Sie Daten aus mehreren Kindern zu aggregieren oder zwei zu haben, Kind Komponenten miteinander kommunizieren, um den Zustand bewegen nach oben, so dass es in der Elternkomponente lebt. Das übergeordnete Element kann den Status dann über Requisiten an die untergeordneten Elemente zurückgeben, sodass die untergeordneten Komponenten immer synchron miteinander und mit dem übergeordneten Element sind.