Meteor + Reagieren: Zeigen Sie verschiedene Artikel Navigation auf der Login-Zustand abhängig

Question

Ich habe ein Meteor + Applikation reagieren, wo ich eine Header-Klasse wie dieses:

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

ich ein Konten-System haben, das funktioniert schön, aber jetzt möchte ich das Aussehen der NavBar basierend davon ändern, ob der Benutzer angemeldet ist oder nicht.

Wie konnte ich das erreichen?

I.E.

Wenn der Benutzer Meteor angemeldet ist, zeigen Sie die Komponente <NavLoggedIn /> an. Andernfalls zeigen Sie die Komponente <NavLoggedOut /> an.

Answer 1

Sie müssen import { Meteor } from 'meteor/meteor' und fügen Sie folgendes zu Ihrer render() Funktion:

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