reactjs - helmet - react title

Reaccionar-cómo pasar el estado a otro componente

Question

Estoy tratando de averiguar cómo notificar a otro componente sobre un cambio de estado. Digamos que tengo 3 componentes: App.jsx, Header.jsx y SidebarPush.jsx y todo lo que estoy tratando de hacer es alternar una clase con un onClick.

Así que el archivo Header.jsx tendrá 2 botones cuando se haga clic en él cambiará los estados a verdadero o falso. Los otros 2 componentes App.jsx y Header.jsx necesitarán conocer estos cambios de estado para poder alternar una clase cada vez que esos estados cambien.

App.jsx

import React from ''react'';
import Header from ''Header'';
import classNames from "classnames";
import SidebarPush from ''SidebarPush'';
import PageWrapper from ''PageWrapper'';
var MainWrapper = React.createClass({
render: function() {
return (
<div className={classNames({ ''wrapper'': false, ''SidebarPush-collapsed'': !this.state.sidbarPushCollapsed })}>
<Header/>
<SidebarPush/>
<PageWrapper>
{this.props.children}
</PageWrapper>
</div>
);
}
});
module.exports = MainWrapper;

Header.jsx

import React from ''react'';
import ReactDom from ''react-dom'';
class Header extends React.Component {
constructor() {
super();
this.state = {
sidbarPushCollapsed: false,
profileCollapsed: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
sidbarPushCollapsed: !this.state.sidbarPushCollapsed,
profileCollapsed: !this.state.profileCollapsed
});
}
render() {
return (
<header id="header">
<ul>
<li>
<button type="button" id="sidbarPush" onClick={this.handleClick} profile={this.state.profileCollapsed}>
<i className="fa fa-bars"></i>
</button>
</li>
<li>
<button type="button" id="profile" onClick={this.handleClick}>
<i className="icon-user"></i>
</button>
</li>
</ul>
<ul>
<li>
<button id="sidbarOverlay" onClick={this.handleClick}>
<i className="fa fa-indent"></i>
</button>
</li>
</ul>
</header>
);
}
};
module.exports = Header;

SidebarPush.jsx

import React from ''react'';
import ReactDom from ''react-dom'';
import classNames from "classnames";
class SidebarPush extends React.Component {
render() {
return (
<aside className="sidebarPush">
<div className={classNames({ ''sidebar-profile'': true, ''hidden'': !this.state.pagesCollapsed })}>
....
</div>
<nav className="sidebarNav">
....
</nav>
</aside>
);
}
}
export default SidebarPush;

Answer 1

Mueva todo su estado y la función handleClick del Header a su componente MainWrapper .

Luego pase los valores como accesorios a todos los componentes que necesitan compartir esta funcionalidad.

class MainWrapper extends React.Component {
constructor() {
super();
this.state = {
sidbarPushCollapsed: false,
profileCollapsed: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
sidbarPushCollapsed: !this.state.sidbarPushCollapsed,
profileCollapsed: !this.state.profileCollapsed
});
}
render() {
return (
//...
<Header
handleClick={this.handleClick}
sidbarPushCollapsed={this.state.sidbarPushCollapsed}
profileCollapsed={this.state.profileCollapsed} />
);

Luego, en el método render () de tu Encabezado, this.props :

<button type="button" id="sidbarPush" onClick={this.props.handleClick} profile={this.props.profileCollapsed}>