reactjs - react + react 路由器 : Re-render Navbar component when children component is replaced on redirect

Question

我正在使用 React 15.0.1 和 react-router 2.2.1。我使用 App 作为父组件，它呈现从路由器处理程序传递的子组件。

var App = React.createClass({

    getInitialState(){
        return {
            auth : false
        }
    },

    checkAuth(){
        var self = this;
        $.ajax({
            type : 'GET',
            url : '/auth',
            success : function(res){
                if(res){
                    self.setState({
                        auth : true
                    });
                }else{
                    self.setState({ auth : false});
                }
            }
        });
    },

    render() {
        return(
            <div className="appWrapper">
                <Navbar auth={this.state.auth}/>
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
});

这是我的导航栏组件。

var Navbar = React.createClass({

    getInitialState(){
        return{
            user_actions : '' ,
            auth : this.props.auth
        }
    },

    componentDidMount(){
        this.checkAuth();
    },

    componentWillReceiveProps(nextProps){
        this.setState({
            auth : nextProps.auth
        }, function(){
            this.checkAuthState();
        });

        console.log(nextProps.auth);
    },

    checkAuth(){
        var self = this;
        $.ajax({
            type : 'GET',
            url : '/auth',
            success : function(res){
                if(res){
                    self.setState({
                        auth : true
                    });
                }else{
                    self.setState({ auth : false});
                }
                self.checkAuthState();
                console.log(self.state);
            }
        });
    },

    checkAuthState(){

        if(!this.state.auth){
            this.state.user_actions =   <ul className="nav navbar-nav navbar-right">
                                            <li><a href="/login">Login</a></li>
                                            <li><a href="/register">Register</a></li>
                                        </ul>;
            this.setState({
                user_actions : this.state.user_actions
            });
        }

        if(this.state.auth){
            this.state.user_actions =   <ul className="nav navbar-nav navbar-right">
                                            <li><a href="/logout">Logout</a></li>
                                        </ul>;
            this.setState({
                user_actions : this.state.user_actions
            });
        }
    },

    render : function(){
        return (
            <nav className="navbar navbar-default">
                <div className="container">
                    <a href="/" className="navbar-brand">Reactor</a>
                    {this.state.user_actions}
                </div>
            </nav>
        );
    }
});

这些是我的路线处理程序。当用户登陆路线时，将检查他们的身份验证。如果身份验证失败，他们将被重定向到登录路由。

var routes = (
    <Router history={browserHistory}>
        <Route path="/" component={require('./components/app')}>
            <IndexRoute component={require('./components/dashboard/index')} onEnter={Auth.isAuthenticated}/>

            <Route path="/register"
                   component={require('./components/authentication/register')}
                   onEnter={Auth.isNotAuthenticated} />

            <Route path="/login"
                   component={require('./components/authentication/login')}
                   onEnter={Auth.isNotAuthenticated}/>

            <Route path="*"
                   component={require('./components/404/404')}/>
        </Route>
    </Router>
);

当应用程序组件首次与导航栏和子组件一起安装时，它会检查身份验证并相应地向导航栏添加链接。当用户在成功登录后从登录路由重定向到索引路由时，子组件将替换为不同的组件，并且该组件的生命周期方法将被调用，但 Navbar 不会重新呈现。我如何重新呈现 Navbar 组件，以便它可以再次检查身份验证并更改导航栏链接？

Answer 1

我想通了，我将一个方法从 App 组件传递给子组件。

var App = React.createClass({

    getInitialState(){
        return {
            auth : false
        }
    },

    checkAuth(){
        var self = this;
        $.ajax({
            type : 'GET',
            url : '/auth',
            success : function(res){
                if(res){
                    self.setState({
                        auth : true
                    });
                }else{
                    self.setState({ auth : false});
                }
            }
        });
    },

    updateNavbar(){
        this.checkAuth();
    },

    render() {
        return(
            <div className="appWrapper">
                <Navbar auth={this.state.auth}/>
                <div className="container">
                    {React.cloneElement(this.props.children, {update: this.updateNavbar})}
                </div>
            </div>
        );
    }
});

当子组件，例如 Login 对用户进行身份验证时，它会调用作为 prop 传递的更新方法，该方法将重新检查身份验证，并更改 App 组件的身份验证状态，这将在 Navbar 组件上使用新的 props 触发 componentWillReceiveProps 方法，这将改变状态并重新渲染 Navbar 组件。这就是我想要实现的目标。

var Login    =   React.createClass({
    getInitialState(){
        return {
            user : {email  : '', password : ''},
            auth_redirect : '',
            errors  : {},
            message : ''
        }
    },

    componentWillMount(){...},

    registerFormIsValid : function(){....},

    validateUser : function(){
        var self = this;
        $.ajax({
            type : 'POST',
            url : '/login',
            data : {
                email : this.state.user.email,
                password : this.state.user.password
            },
            success : function(res){
                if(!res.auth){
                    self.setState({
                        message : <Alert message="Invalid Email or Password!"/>
                    });
                }else{
                    self.props.update(); // Update Navbar 
                    self.context.router.push('/');
                }
            }
        });
    },

    Authenticate : function(event){....},

    saveUserState : function(event){...},

    render : function(){
        return (
            <div>
                <div className="login container">
                    <LoginForm
                        user={this.state.user}
                        onChange={this.saveUserState}
                        onSave={this.Authenticate}
                        errors={this.state.errors} />
                    {this.state.message}
                </div>
            </div>
        );
    }
});

现在我可以通过调用 this.props.update() 从通过路由处理程序传递下来的任何子组件更新我的 Navbar 组件链接。