Meteor + React：根据登录状态显示不同的导航项

Question

我有一个 Meteor + React 应用程序，我有一个 Header class 像这样：

import React, { Component } from 'react'

import { NavLoggedIn } from './header/NavLoggedIn'
import { NavLoggedOut } from './header/NavLoggedOut'

export class Header extends Component {
    render() {
        return (
            <header className="main-header">
                <nav className="navbar navbar-static-top" role="navigation">
                    <div className="navbar-custom-menu">
                        <NavLoggedIn />
                        <NavLoggedOut />
                    </div>
                </nav>
            </header>
        )
    }
}

我有一个运行良好的帐户系统，但现在我想根据用户是否登录来更改 NavBar 的外观。

我怎样才能做到这一点？

I.E.

如果 Meteor 用户登录显示 <NavLoggedIn /> 组件。否则，显示 <NavLoggedOut /> 组件。

Answer 1

您需要 import { Meteor } from 'meteor/meteor' 并将以下内容添加到您的 render() 函数中：

import React, { Component } from 'react'
import { Meteor } from 'meteor/meteor

import { NavLoggedIn } from './header/NavLoggedIn'
import { NavLoggedOut } from './header/NavLoggedOut'

export class Header extends Component {
    render() {
       let navigate;
        // If Meteor.userID() is null then render <NavLoggedOut />, otherwise <NavLoggedIn />
        if(Meteor.userId())
          navigate=<NavLoggedIn />;
        else
          navigate=<NavLoggedOut />
        return (
            <header className="main-header">
                <nav className="navbar navbar-static-top" role="navigation">
                    <div className="navbar-custom-menu">
                        {navigate}
                    </div>
                </nav>
            </header>
        )
    }
}

Meteor + React：根据登录状态显示不同的导航项

Meteor + React: Show different Navigation items depending on the login state

meteor

reactjs

meteor-accounts

meteor-1.4