Estoy tratando de construir mi primer proyecto React, y actualmente estoy armando un botón de navegación de hamburguesas y un menú que aparece al hacer clic en la navegación.
He dividido esto en dos componentes; Hamburguesa y MenuOverlay. El código para ambos está debajo.
Actualmente tengo un onClick en Hamburger alternando una clase en él, pero ¿cómo cambiaría también el menú de ese clic? Está oculto con pantalla: ninguno; por defecto. Probablemente una pregunta muy básica, así que disculpas, todavía estoy tratando de entender React.
superposición de menú
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;Hamburguesa
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;En la forma más simple, tendría un componente de contenedor que los envuelve a ambos y administra el estado de los componentes.
<MenuContainer> <Hamburger /> <MenuOverlay /> </MenuContainer> Y en <MenuContainer> tendría un estado de active algún pseudocódigo rápido.
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> ) } } entonces, en hamburger, solo usaría this.props.onClick para cambiar el estado de activo y luego, en esos componentes correspondientes, use el accesorio de this.props.active para determinar qué clases se deben aplicar, etc.
Dado que un elemento no es el padre de otro elemento, deberá extraer la variable manteniendo la información de alternancia en la cadena de elementos hasta que resida en un lugar común.
Es decir, mantenga la variable de estado "activa" en un ancestro de los dos elementos y proporcione a Hamburger una devolución de llamada en los accesorios que, cuando se llama, modifica el estado de ese componente ancestro. Al mismo tiempo, también pase la variable de estado activo a MenuOverlay como accesorio, y todo debería funcionar en conjunto.
Ver aquí para más información:
https://facebook.github.io/react/tutorial/tutorial.html#lifting-state-up
Específicamente,
Cuando desee agregar datos de varios elementos secundarios o que dos componentes secundarios se comuniquen entre sí, mueva el estado hacia arriba para que viva en el componente principal. Luego, el padre puede devolver el estado a los hijos a través de accesorios, de modo que los componentes secundarios estén siempre sincronizados entre sí y con el padre.