我试图弄清楚如何通知另一个组件有关状态更改。假设我有3个组件- App.jsx,Header.jsx和SidebarPush.jsx,而我要做的就是用onClick切换类。
因此,Header.jsx文件在单击时将具有2个按钮,将状态切换为true或false。其他2个组件App.jsx和Header.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;
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;
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;
将所有状态和handleClick功能从Header移到MainWrapper组件。
handleClick
Header
MainWrapper
然后将值作为道具传递给需要共享此功能的所有组件。
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} /> );
然后在标题的render()方法中,使用this.props:
this.props
<button type="button" id="sidbarPush" onClick={this.props.handleClick} profile={this.props.profileCollapsed}>