Meteor + React：根據登錄狀態顯示不同的導航項

Question

我有一個Meteor + React Application，其中有一個Header類，如下所示：

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的外觀。

我該怎么做？

IE

如果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>
        )
    }
}