Resulta que tengo el componente App.js que tiene el state isHome:true
según se va navegando en la web se va cambiando el state. Este state tiene la función de mostrar un contenido u otro según si es true
o false.
Después, tengo componentes como páginas, homeController
para el home, contactoController
para contacto... cuando el usuario sigue los links del DOM no tengo problema porque cada link tiene una función que setea el state a true
o a false
según convenga. El problema llega cuando por ejemplo, se carga el home, el usuario clica en contacto (se cambia el state), y a continuación en vez de clicar en home, le dan para atrás en el navegador. Con esta acción, el contenido del home no es el que debe.
¿Como puedo setear en HomeController el state del componente padre?
Contenido del App.js:
import React, { Component } from 'react';
import {Switch, Route, NavLink} from 'react-router-dom';
import { ReactComponent as Logo } from "./logo360.svg";
import { ReactComponent as Arg } from "./arg.svg";
import Fade from "react-reveal/Fade";
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import homeComponent from './components/homeComponent';
import serviciosComponent from "./components/serviciosComponent";
import imprentaComponent from "./components/imprentaComponent";
import contactoComponent from "./components/contactoComponent";
import notFoundComponent from "./components/notFoundComponent";
import avisoLegalComponent from "./components/avisoLegalComponent";
import condicionesComponent from "./components/condicionesComponent";
const content = [
{
title: 'Dpto. Diseño',
image: 'assets/img/slider/diseno.jpg',
user: 'Juan Manuel',
user2: 'Antonio Dorado',
user3: 'Israel Zarallo',
left: false
},
{
title: 'Dpto. Digital',
image: 'assets/img/slider/digital.jpg',
user: 'Rosario Azuar',
left:true
},
{
title: 'Administración',
image: 'assets/img/slider/admon.jpg',
user: 'David López',
user2: 'Ana Isabel Vázquez',
user3: 'Rocío Díez',
left:true
},
{
title: 'Imprenta',
image: 'assets/img/slider/imprenta.jpg',
user: 'Joaquín Heredia',
user2: 'Eugenio Andana',
left:false
},
{
title: 'Dpto. Informática',
image: 'assets/img/slider/informatica.jpg',
user: 'Adrián Porcel',
left:true
},
{
title: 'Logística',
image: 'assets/img/slider/almacen.jpg',
user: 'Carlos Contreras',
user2: 'Mercedes Ruiz',
left:false
}
];
function ClaseSlider(left) {
const clase = left ?
'slider-bottom' :
'slider-top';
return clase;
}
function HeaderCom({isHome}) {
const header = isHome ?
<div className={'video-intro'}>
<video width="100%" height="auto" style={{width: '100%'}} src="http://arguelles360.com/img/intro.webm"
loop="loop" autoPlay="autoplay" muted={'muted'}>
Tu navegador no implementa el elemento <code>video</code>.
</video>
</div> :
<div>
<Slider>
{content.map((article, index) => <div key={index}>
<div className={ClaseSlider(article.left)}>
<img src={article.image} alt={article.title}/>
</div>
</div>)}
</Slider>
</div>;
return header;
}
class App extends Component {
constructor(props){
super(props);
this.state = {
isHome: true,
menuMobile: false,
header: true
};
this.notHome = this.notHome.bind(this);
this.isHome = this.isHome.bind(this);
this.openMenuMobile = this.openMenuMobile.bind(this);
this.closeMenuMobile = this.closeMenuMobile.bind(this);
}
openMenuMobile(){
this.setState({menuMobile:true});
}
closeMenuMobile(){
this.setState({menuMobile:false})
}
notHome(){
this.setState({isHome:false});
}
isHome(){
this.setState({isHome:true});
}
componentDidMount() {
var h1 = parseInt(this.refs.header.offsetHeight);
window.addEventListener('scroll', this._calcScroll.bind(this, h1));
}
componentWillUnmount() {
window.removeEventListener('scroll', this._calcScroll)
}
_calcScroll(h1) {
var _window = window;
var heightDiff = parseInt(h1);
var scrollPos = _window.scrollY;
if (scrollPos > heightDiff) {
this.setState({
header:false
});
} else {
this.setState({
header:true
});
}
}
render() {
const inicio = this.state.isHome ? 'video-header' : 'slider-header';
const claseBox = this.state.menuMobile ? 'mobile-menu-box opened' : 'mobile-menu-box';
const claseNav = this.state.menuMobile ? 'nav-header darker' : 'nav-header';
const claseList = this.state.menuMobile ? 'mobile-menu list-opened' : 'mobile-menu';
const claseHeader = this.state.header ? '' : ' white-menu-mobile';
return (
<div className="App">
<header className={inicio} ref={'header'}>
<HeaderCom isHome={this.state.isHome} />
<Arg className={"logo-desktop"}/>
<nav className={claseNav + claseHeader}>
<Fade cascade top delay={500}>
{/*
Menú Desktop
*/}
<ul className={'desktop-menu'}>
<li className={'item-menu-desktop'} onClick={this.isHome}>
<NavLink to={'/'}>Inicio</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/servicios'}>Servicios</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/imprenta'}>Imprenta</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/tienda'}>Tienda</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/contacto'}>Contacto</NavLink>
</li>
</ul>
</Fade>
{/*
Menú movil
*/}
<div className={claseBox}>
<Arg className={'logo-movil'}/>
<div className={'box-buttons'}>
<div className="hamburger" onClick={this.openMenuMobile}>
<div></div>
<div></div>
<div></div>
</div>
<div className="ex" onClick={this.closeMenuMobile}>
<div></div>
<div></div>
</div>
</div>
<ul className={claseList}>
<li className={'item-menu-desktop'} onClick={this.isHome}>
<NavLink to={'/'}>Inicio</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/servicios'}>Servicios</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/imprenta'}>Imprenta</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/tienda'}>Tienda</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/contacto'}>Contacto</NavLink>
</li>
</ul>
</div>
</nav>
<div className="logo-head">
<Fade delay={1000}>
<Logo/>
</Fade>
</div>
</header>
<Switch>
<Route exact path={'/'} component={homeComponent}/>
<Route path={'/home'} component={homeComponent}/>
<Route path={'servicios'} component={serviciosComponent}/>
<Route path={'/imprenta'} component={imprentaComponent}/>
<Route path={'/contacto'} component={contactoComponent}/>
<Route path={'/aviso-legal'} component={avisoLegalComponent}/>
<Route path={'/condiciones-y-uso'} component={condicionesComponent}/>
<Route component={notFoundComponent}/>
</Switch>
<footer className={'footer-arg'}>
<div className="container-fluid">
<div className="row">
<div className="col-xs-12"> Argüelles360.com - Todos los derechos reservados <br/> <NavLink to={'/aviso-legal'}> <span onClick={this.notHome}>Aviso legal</span></NavLink> - <NavLink to={'/condiciones-y-uso'}><span onClick={this.notHome}>Condiciones de uso</span></NavLink></div>
</div>
</div>
</footer>
</div>
);
}
}
export default App;
isHome: true
dentro del métodocomponentDidMount
es suficiente. Sin embargo, no entiendo por qué debes complicarte tanto con una variable así, cuando existen librerías comoreact-router-dom
yreact-redux
que de formas distintas pueden ayudarte a resolver eso de una manera más prácticaisHome:true
del HomeController ??? el state se encuentra en el App.js. En cuanto a la complicación, usoreact-router-dom
para el routeo. El problema es que, tengo un header (dos en realidad, uno se muestra si está en el home, y otro se muestra en el resto de páginas, éste último es un slider, y no quiero que se resetee cada vez que navego) y la condición de este header se encuentra en App.js