我有一个 Headers ,它应该在其状态发生变化时更改其内部组件,例如当用户单击登录按钮时,用户配置文件导航将替换该按钮 .
我的按钮是导航组件的一部分,我不知道如何从此导航组件更新其容器组件的状态 .
这是我的商店目前的样子
var React = require('react');
var Reflux = require('reflux');
var LoginActions = require('../actions/loginbutton.js');
var LoginStore = Reflux.createStore({
listenables: LoginActions,
getInitialState: function() {
return {
loggedin : false,
links: [{
"name": "Link1",
"url": "http://www.google.com"
},
{
"name": "Link2",
"url": "http://www.google.com"
},
{
"name": "Link3",
"url": "http://www.google.com"
}]
};
},
onLogin: function() {
/*How do i replace the state for the header*/
Header.replaceState({
loggedin: true,
data: {
"userName": "John Doe",
"profile": "http://www.google.com",
"img": "https://secure.gravatar.com/avatar/87f33484c35375ea9c8fddd2f7e91ee5?d=https://d3rpyts3de3lx8.cloudfront.net/hackerrank/assets/gravatar.jpg&s=200",
"email": "maisnamraju@gmail.com",
"links": [{
"name": "Settings",
"url": "/settings"
},
{
"name": "Profile",
"url": "/dashboard"
},
{
"name": "Account",
"url": "/Account"
},
{
"name": "Logout",
"url": "/logout"
}]
}
});
console.log(this.state);
}
});
module.exports = LoginStore;
这是我的 Headers 组件
var React = require('react');
var Navigation = require('./navmenu.js');
var UserNav = require('./usermenu.js');
var ReactAddons = require('react/addons');
var Reflux = require('reflux');
var LoginStore = require('../stores/loginstore.js');
var LoginActions = require('../actions/loginbutton.js');
var LoggedOut = React.createClass({
props: {
navs: React.PropTypes.array
},
render: function() {
return(
<div>
<div className = "nav navbar-nav navbar-right" >
<button onClick={LoginActions.Login} className = "login btn btn-primary" > <i className = "fa fa-facebook" > </i> Log In</button >
</div>
<div className = "collapse navbar-collapse left-bar" >
<Navigation classNames = "notloggedin nav navbar-nav" navs = {this.props.navs} />
</div>
</div>
);
}
});
var LoggedIn = React.createClass({
props: {
navs: React.PropTypes.array,
userName: React.PropTypes.string
},
render: function() {
return(
<div className = "nav navbar-nav navbar-right" >
<UserNav navs = {this.props.links} userName={this.props.userName} />
</div>
);
}
});
var Header = React.createClass({
mixins: [Reflux.connect(LoginStore, 'data')],
render: function () {
var LoggedInState = this.state.data.loggedin;
if(LoggedInState === 'false' || LoggedInState === false ) {
LogInArea = <LoggedOut navs={this.state.data.links} />
}else {
LogInArea = <LoggedIn navs={this.state.data.data.links} userName={this.state.data.data.userName}/>
}
return (
<div id = { this.props.headerId } >
<div className = "navbar navbar-default navbar-fixed-top" >
<div className = "container" >
<div className = "navbar-header" >
<button type = "button" className = "navbar-toggle collapsed" data-toggle = "collapse" >
<span className = "sr-only"> Toggle navigation < /span >
<span className = "icon-bar" > < /span >
<span className = "icon-bar" > < /span >
<span className = "icon-bar" > < /span >
</button >
<a href = "#" >
<img src="https://www.hackerrank.com/assets/brand/h_mark_sm.png" />
</a>
</div>
{ LogInArea }
</div>
</div>
</div>
);
}
});
module.exports = Header;
当我设置日期的初始状态时,我没有问题渲染初始头,但我如何从LoggedOut组件内部定位它的状态,以便它在商店内设置状态?
1 回答
要修改商店的状态,您应该在没有
LoggedOut
组件的情况下从Reflux.createActions
调度先前创建的action
.假设您的操作名为
logout
,您可以像这样创建它:为了让你的商店做出反应,你必须听取行动:
现在你在组件内部所要做的就是调用
logout
函数 . 您可以将其作为道具传递下来,或者如果您没有同构应用程序则使用全局存储 .