Оператор if в операторе return моего текущего компонента бросает непредвиденную ошибку маркера

Question

У меня есть презентационный компонент, называемый Navbar.jsx, который возвращает другой презентационный компонент на основе того, аутентифицирован ли пользователь или нет. Когда я запускаю webpack, я получаю сообщение о том, что «if» в моей инструкции if является неожиданным токеном. Вы увидите инструкцию if else в div-bar. Вот Navbar.jsx:

import React, {PropTypes} from 'react'; 
import PreAuthNavTabs from './PreAuthNavTabs'; 
import PostAuthNavTabs from './PostAuthNavTabs'; 

const Navbar = ({ activeUser, loginUser }) => { 

    return (
     <div> 
      <div className="navbar navbar-default navbar-fixed-top" role="navigation"> 
       <div className="container"> 
       <div className="navbar-header"> 
        <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span className="sr-only">Toggle Navigaton</span> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
        </button> 
        <Link to="/inventory"><img className="navbar-brand" src='../../css/hello_bacsi.png'></img></Link> 
       </div> 
       <div className="navbar-collapse collapse"> 
          { 
           if (activeUser) { 
            return <PostAuthNavTabs activeUser={activeUser} />; 
           } else { 
            return <PreAuthNavTabs loginUser={loginUser} />; 
           } 
          } 
       </div> 
       </div> 
      </div> 
      </div> 
    ); 

}; 

Navbar.propTypes = { 
    activeUser: PropTypes.object, 
    loginUser: PropTypes.func 
}; 

export default Navbar; 

Answer 1

Вы не можете использовать if-else заявления в JSX. Посмотрите на the relevant docs.

---

Вместо этого используйте тройной оператор:

<div className="navbar-collapse collapse"> 
    {activeUser ? 
     <PostAuthNavTabs activeUser={activeUser} /> : 
     <PreAuthNavTabs loginUser={loginUser} /> 
    } 
</div> 

Answer 2

IIFE и тройные выражения могут работать в JSX, потому что они Javascript expressions; if утверждений нет.

Немного модификации на примере официального дока, чтобы сделать его более ясным: if-else in JSX

// This JSX: 
<div id={if (condition) { 'msg' }}>Hello World!</div> 

// Is transformed to this JS: 
const props = { 
    id: if (condition) { 'msg' } // which isn't valid JavaScript 
} 
const children = "Hello World!" 
React.createElement("div", props, children); 

Вы можете играть с Babel REPL для некоторых корректных выражений, чтобы увидеть, как JSX трансформируются.