我想弄清楚如何通知另一个组件有关状态更改的信息。假设我有 3 个组件 - App.jsx、Header.jsx 和 SidebarPush.jsx，我只是想用 onClick 切换一个类。

因此 Header.jsx 文件将有 2 个按钮，单击时会将状态切换为 true 或 false。其他 2 个组件 App.jsx 和 Header.jsx 需要了解这些状态更改，以便它们可以在这些状态更改时切换类。

应用程序.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;

头文件.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;