React-如何将状态传递给另一个组件
我试图弄清楚如何通知另一个组件有关状态更改。假设我有3个组件-
App.jsx,Header.jsx和SidebarPush.jsx,而我要做的就是用onClick切换类。
因此,Header.jsx文件在单击时将具有2个按钮,将状态切换为true或false。其他2个组件App.jsx和Header.jsx将需要了解这些状态更改,以便它们可以在这些状态更改时切换类。
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;
-
将所有状态和
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
:<button type="button" id="sidbarPush" onClick={this.props.handleClick} profile={this.props.profileCollapsed}>
-
React-如何将prop传递给作为prop传递的组件
2021-01-31 关注 0 浏览167 1答案
-
如何将一个反应组件传递给另一个反应组件以包含第一个组件的内容?
2022-05-26 关注 0 浏览11 1答案
-
React.js-将状态值从一个组件传递到另一个
2021-01-31 关注 0 浏览158 1答案
-
Kotlin:如何将一个函数作为参数传递给另一个函数?
2022-05-26 关注 0 浏览23 1答案
-
反应:如何将道具从孩子传递给父母到另一个孩子?
2021-01-31 关注 0 浏览245 1答案
-
如何将命令输出作为多个参数传递给另一个命令
2021-02-02 关注 0 浏览97 1答案
-
如何在React或React-Redux中将数据从一个组件传递到另一个组件?
2021-01-31 关注 0 浏览86 1答案
-
如何将回调作为参数传递给另一个函数
2021-01-31 关注 0 浏览76 1答案
-
如何将父状态传递给其子组件?
2021-01-31 关注 0 浏览83 1答案
-
如何将变量从一个JFrame传递到另一个
2021-01-30 关注 0 浏览93 1答案