Javascript my presentational组件的return语句中的if语句抛出了一个意外的令牌错误

我有一个名为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;

import React，{PropTypes}来自'React'；
从“/PreAuthNavTabs”导入PreAuthNavTabs；
从“/PostAuthNavTabs”导入PostAuthNavTabs；
常量导航栏=（{activeUser，loginUser}）=>{
返回(
切换导航
{
if（activeUser）{
返回；
}否则{
返回；
}
}
);
};
Navbar.propTypes={
activeUser:PropTypes.object，
登录用户：PropTypes.func
};
导出默认导航栏；

在JSX中不能使用

if-else

语句。看一看

---

相反，请使用三元运算符：

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

{activeUser？
:
}

在JSX中不能使用

if-else

语句。看一看

---

相反，请使用三元运算符：

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

{activeUser？
:
}

IIFE和三元表达式可以在JSX中工作，因为它们是<代码>如果语句不可用

对官方文件的示例稍作修改，使其更加清晰：

//此JSX：
你好，世界！
//已转换为此JS：
常量props={
id:if（condition）{'msg'}//哪个是无效的JavaScript
} 
const children=“你好，世界！”
React.createElement（“div”、道具、子对象）；

---

您可以使用一些有效的表达式来查看JSX是如何转换的。

IIFE和三元表达式可以在JSX中工作，因为它们是<代码>如果语句不可用

对官方文件的示例稍作修改，使其更加清晰：

//此JSX：
你好，世界！
//已转换为此JS：
常量props={
id:if（condition）{'msg'}//哪个是无效的JavaScript
} 
const children=“你好，世界！”
React.createElement（“div”、道具、子对象）；

---

您可以使用一些有效的表达式来查看JSX是如何转换的。

您知道为什么立即调用的函数在JSX中可以工作，而if else语句不能工作吗？@Mjuice JSX标记是函数调用（或对象文本）的糖分-它不起作用的原因与任何其他函数调用中的

if

/

else

语句不起作用的原因相同-它不是一个返回值的表达式，而IIFE是。因此，如果我将IIFE插入我的花括号中，然后在IIFE中使用if-else语句并对某个值进行“return”调用，那不行吗？那会行的。您可以定义函数并从JSX内部调用它们。您知道为什么立即调用的函数可以在JSX中工作，而if else语句不能工作吗？@Mjuice JSX标记是函数调用（或对象文本）的糖-它不起作用的原因与任何其他函数调用中的

if

/

else

语句不起作用的原因相同-它不是一个返回值的表达式，而IIFE是。因此，如果我将IIFE插入我的花括号中，然后在IIFE中使用if-else语句并对某个值进行“return”调用，那不行吗？那会行的。您可以定义函数并从JSX内部调用它们。如果我在IIFE中包装了一个If-else链，然后将其插入我的JSX中，这会起作用吗？我在你链接的React文档中看到，他们在IIFE中使用switch语句，我真的很难理解什么是表达式和什么不是表达式之间的区别。是的，在IIFE中包装if-else可以工作，只要你为每种情况返回一个元素。表达式是产生值的东西。查看此链接：假设您确实让activeUser=if。。。其他的这是行不通的。用iLife交换它会的。如果我在iLife中包装了一个If-else链，然后将它插入我的jsx，那会起作用吗？我在你链接的React文档中看到，他们在IIFE中使用switch语句，我真的很难理解什么是表达式和什么不是表达式之间的区别。是的，在IIFE中包装if-else可以工作，只要你为每种情况返回一个元素。表达式是产生值的东西。查看此链接：假设您确实让activeUser=if。。。其他的这是行不通的。用生命来交换它会的。