Reaccionar: cómo pasar el estado a otro componente

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 intento hacer es alternar una clase con un onClick.

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

Aplicación.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;

Encabezado.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;

Solución del problema

Mueva todo su estado y su handleClickfunción de Headera su MainWrappercomponente.

Luego pase 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 su encabezado, usaría this.props:

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