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

Question

我有一个Meteor + React 应用程序，其中有一个像这样的 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>
        )
    }
}