Die if-Anweisung in der return-Anweisung meiner Präsentationskomponente wirft einen unerwarteten Token-Fehler

Question

Ich habe eine Präsentationskomponente namens Navbar.jsx, die eine weitere Präsentationskomponente basierend darauf zurückgibt, ob der Benutzer authentifiziert ist oder nicht. Wenn ich Webpack starte, bekomme ich eine Fehlermeldung, dass das "if" in meiner if-Anweisung ein unerwartetes Token ist. Sie sehen die if else-Anweisung im Navbar-Collapse-div. Hier ist 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

Sie können nicht if-else Aussagen in JSX verwenden. Schauen Sie sich the relevant docs an.

---

Verwenden Sie stattdessen den ternären Operator:

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

Answer 2

IIFE und ternäre Ausdrücke können in JSX arbeiten, weil sie Javascript expressions sind; if Aussagen sind nicht.

Eine kleine Änderung am Beispiel des offiziellen doc es deutlicher zu machen: 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); 

Sie mit Babel REPL spielen, um für einige gültige Ausdrücke, um zu sehen, wie Ihr JSX umgewandelt wird.