流星和反应 |登录注销导航

Question

我是 meteor + react 的新手，我想知道如果用户登录或注销，显示链接的正确方式。

更新： 注销后，这些链接不会被动更改。他们只是坐在页面上，直到我导航到其他地方。然后他们更新。

LoggedOut = React.createClass({
    render() {
        return(
            <nav>
                <a href="/">Home</a>
                <a href="/login">Login</a>
                <a href="/register">register</a>
            </nav>
        )
    }
})
LoggedIn = React.createClass({
    render() {
        return(
            <nav>
                <a href="/">Home</a>
                <a href="/newProduct">New Product</a>
                <a className="text-danger" id="logout" href=""> Logout </a>
            </nav>
        )
    }
})
Nav = React.createClass({
    render() {
        if(Meteor.userId()){
            return(
                <LoggedIn />
            )
        }else{
            return(
                <LoggedOut />
            )
        }
    }
})

Answer 1

已解决

1. 我不得不添加一个包才能从 meteor 获取反应数据：meteor add react-meteor-data
2. 我不得不为包装添加混音mixins: [ReactMeteorData]
3. 我不得不使用 getMeteorData(({} 来返回当前用户的状态。

.

LoggedOut = React.createClass({
    render() {
        return(
            <nav>
                <a href="/">Home</a>
                <a href="/login">Login</a>
                <a href="/register">register</a>
            </nav>
        )
    }
})
LoggedIn = React.createClass({
    signOut: function(e) {
        Meteor.logout();
    },
    render() {
        return(
            <nav>
                <a href="/">Home</a>
                <a href="/newProduct">New Product</a>
                <a href="" onClick={this.signOut}> Logout </a>
            </nav>
        )
    }
})

Nav = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        return{
            currentUser: Meteor.user()
        }
    },
    render() {
        let {currentUser} = this.data;
        if(currentUser){
            return(
                <LoggedIn />
            )
        }else{
            return(
                <LoggedOut />
            )
        }
    }
})