ユーザーがログインボタンをクリックすると、ユーザープロファイルナビゲーションがボタンを置き換えるなど、状態が変化するたびに内部コンポーネントを変更することになっているヘッダーがあります。
私のボタンはナビゲーションコンポーネントの一部であり、このナビゲーションコンポーネントからコンテナコンポーネントの状態を更新する方法がわかりません。
これが私の店の現在の様子です
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コンポーネント内からその状態をターゲットにして、ストア内の状態を設定するにはどうすればよいですか？
ストアの状態を変更するには、コンポーネントなしでfromをaction使用Reflux.createActionsして以前に作成したをディスパッチする必要がありますLoggedOut。
アクションが呼び出されたとしましょう。次のlogoutように作成します。
var logout = Reflux.createAction();
あなたの店がそれに反応するためには、あなたは行動に耳を傾ける必要があります：
var statusStore = Reflux.createStore({
init: function() {
this.listenTo(logout, this.handleLogout);
},
handleLogout: function () {
// set whatever state you want here
}
});
これで、コンポーネント内で行う必要があるのは、logout関数を呼び出すことだけです。小道具として渡すか、同形のアプリケーションがない場合はグローバルストレージを使用できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加