gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:16:11 25 4
gpt4 key购买 nike

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

最佳答案

您不能在 JSX 中使用 if-else 语句。看看the relevant docs .

<小时/>

而是使用三元运算符:

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

关于javascript - 我的演示组件的 return 语句内的 if 语句引发意外的标记错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37933403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com