Meteor + React: Показать различные элементы навигации в зависимости от состояния входа

Question

У меня есть Метеор + Реагировать приложения, где у меня есть класс заголовка, как это:

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.

Если Метеор пользователь, вы должны войти в систему, чтобы увидеть компонент <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> 
     ) 
    } 
}