我的展示组件 return 语句中的 if 语句抛出意外标记错误

Question

我有一个名为 Navbar.jsx 的展示组件 returns 另一个基于用户是否经过身份验证的展示组件。当我运行 webpack 时，我收到一条错误消息，指出我的 if 语句中的 "if" 是一个意外标记。你会在 navbar-collapse div 中看到 if else 语句。这里是 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

你不能在 JSX 中使用 if-else 语句。看看 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 是如何转换的。

我的展示组件 return 语句中的 if 语句抛出意外标记错误

The if statement inside the return statement of my presentational component is throwing an unexpected token error

javascript

reactjs

react-redux