javascript - 我的演示组件的 return 语句内的 if 语句引发意外的标记错误

Question

我有一个名为 Navbar.jsx 的演示组件，它根据用户是否经过身份验证返回另一个演示组件。当我运行 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>