我的演示組件的return語句中的if語句拋出一個意外的令牌錯誤

我有一個名爲Navbar.jsx的表示組件，該組件根據用戶是否經過身份驗證返回另一個表示組件。當我運行webpack時，出現錯誤，說我的if語句中的「if」是一個意外的標記。你會在navbar-collapse div中看到if else語句。這裏是Navbar.jsx：我的演示組件的return語句中的if語句拋出一個意外的令牌錯誤

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;

來源

2016-06-20 Mjuice

你不能在JSX中使用if-else語句。看看the relevant docs。

相反，使用三元運算：

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

來源

2016-06-20 23:37:19 Timo

你知道爲什麼一個立即調用的函數可以在JSX中工作，但是如果else語句不行？ – Mjuice

@Mjuice JSX標籤是用於函數調用（或對象文本）的糖 - 它不起作用的原因是，任何其他函數調用中的if語句/ else語句都不起作用 - 它不是表達式，它返回一個價值，而一個IIFE是。 –

所以，如果我在這裏插入一個IIFE到我的大括號中，然後在一個值爲「return」的情況下在IIFE中使用If else語句，應該不是這樣嗎？ – Mjuice

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是如何轉化。

來源

2016-06-21 00:28:59 xyc

如果我在IIFE中包含if else鏈，然後將其插入到我的jsx中，那會起作用嗎？在我看到你鏈接的React文檔中，他們在IIFE中使用了switch語句，我真的很難理解什麼是表達式和什麼不是。 – Mjuice

只要您爲每種情況返回一個元素，就會在IIFE中進行包裝。表達式是產生價值的東西。看到這個鏈接：http://www.2ality.com/2012/09/expressions-vs-statements.html?m=1 – xyc

想象一下，你讓activeUser = if ... else ...這是行不通的。交換與IIFE它會。 – xyc

我的演示組件的return語句中的if語句拋出一個意外的令牌錯誤

回答

相關問題