如何在 reactjs 和回流中从其 child 设置容器组件的状态？

Question

我有一个 header 应该会在其状态发生变化时更改其内部组件，例如当用户单击登录按钮时，用户配置文件导航会替换该按钮。

我的按钮是导航组件的一部分，我不知道如何从该导航组件更新其容器组件的状态。

这是我的商店目前的样子

 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;

这是我的 header 组件

    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;

当我设置日期的初始状态时，渲染初始 header 没有问题，但我如何从 LoggedOut 组件内部定位它的状态，以便它在商店内设置状态？

Answer 1

要修改商店的状态，您应该在没有 LoggedOut 组件的情况下调度您之前使用 Reflux.createActions 创建的 action。

假设您的操作名为 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 函数。您可以将其作为 props 传递，或者如果您没有同构应用程序，则可以使用全局存储。

如何在 reactjs 和回流中从其 child 设置容器组件的状态？

How to set state of container component from its child in reactjs and reflux?

flux

reactjs

react-jsx

refluxjs