У меня есть заголовок, который должен изменять свои внутренние компоненты всякий раз, когда происходит изменение его состояния, например, когда пользователь нажимает кнопку входа в систему, навигация профиля пользователя заменяет кнопку.
Моя кнопка является частью компонента навигации, и я не знаю, как обновить состояние его компонента-контейнера из этого компонента навигации.
Вот как сейчас выглядит мой магазин
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": "[email protected]",
"links": [{
"name": "Settings",
"url": "/settings"
},
{
"name": "Profile",
"url": "/dashboard"
},
{
"name": "Account",
"url": "/Account"
},
{
"name": "Logout",
"url": "/logout"
}]
}
});
console.log(this.state);
}
});
module.exports = LoginStore;
А вот и мой компонент заголовка
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, чтобы он устанавливал состояние внутри хранилища?
