Réagir - comment passer de l'état à un autre composant

Je suis à essayer de comprendre comment notifier un autre composant sur un changement d'état. Disons que j'ai 3 composants de l'Application.jsx,l'en-Tête.jsx,et SidebarPush.jsx et tous, je suis tout simplement essayer de faire est de basculer d'une classe avec un onClick.

Afin de l'en-Tête.jsx fichier possède 2 boutons lorsque l'utilisateur clique dessus permet de basculer entre les états true ou false. Les 2 autres composants de l'Application.jsx et en-Tête.jsx aurez besoin de savoir à propos de ces changements d'état de sorte qu'ils peuvent basculer d'une classe
chaque fois que ces états changement.

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;

En-tête.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;
Vous devez choisir soit ES5 ou ES6 et le bâton avec elle, plutôt que de faire un mélange des deux.

OriginalL'auteur agdev | 2016-08-01

  1. 35

    Déplacer tous de votre état et de votre handleClick fonction de Header à votre MainWrapper composant.

    Puis de transmettre des valeurs comme des accessoires de tous les composants qui ont besoin de partager cette fonctionnalité.

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

    Ensuite dans votre en-Tête de la méthode render (), vous pouvez utiliser this.props:

    <button type="button" id="sidbarPush" onClick={this.props.handleClick} profile={this.props.profileCollapsed}>
    Merci pour votre réponse, cela fait sens. En commençant par le haut et en passant pour les composants enfants. Vous avez la tête en passant les accessoires pour la poignée et cliquez sur le profil de l'état, ce qui est bon. Mais comment pourrais-je passer de l'autre état (sidbarPushCollapsed) vers le bas? Cliquez sur le déclencheur pour que l'on est dans l'en-Tête de la composante.
    Même manière que vous passez profileCollapsed. Vous ajoutez ce que vous voulez comme un attribut. Les attributs sont alors accessibles par le biais de this.props dans votre composant enfant [Voir la mise à jour de la réponse]
    Ah ok, ne savais pas que je pouvais le joindre plusieurs états comme ça. Merci pour votre aide!
    ce que fait cette ligne de this.handleClick = this.handleClick.bind(this); faire?
    Il se lie cette fonction pour le this contexte de l'extérieur de la classe. De cette façon, vous pouvez faire des choses comme this.setState() à l'intérieur des différentes méthodes. Dans cet exemple, la liaison à ce lie à MainWrapper qui reçoit un setState méthode de l'extension de React.Component

    OriginalL'auteur jzm