我的React代码遇到一些问题。我正在尝试添加身份验证,但这给了我错误,例如
./ src / components / UserInfo / index.js第29行:解析错误:意外令牌,预期为“,”
27 | 28 |
29 | {已认证? (| ^ 30 | 31 | 32 |
这是我的代码
import React, { Component } from "react";
import { connect } from "react-redux";
import { Avatar, Popover } from "antd";
import { userSignOut } from "appRedux/actions/Auth";
class UserInfo extends Component {
render() {
const { authenticated } = this.props;
const userMenuOptions = (
<ul className="gx-user-popover">
<li>My Account</li>
<li>Connections</li>
<li onClick={() => this.props.userSignOut()}>Logout
</li>
</ul>
);
return (
{authenticated ? (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
) : (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
)}
)
}
}
const mapStateToProps = state => {
//console.log(state.auth.token);
return {
authenticated: state.auth.token !== null,
locale: state.settings.locale
}
}
export default connect(mapStateToProps, { userSignOut })(UserInfo);
您必须将所有jsx包含在单个标记中,如下所示:
return (
<div className="content-container" ref="container">
{authenticated ? (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
) : (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
)}
</div>
);
问题出在那一行,因为您要返回
return (
{authenticated ? (...) : (...)});
这意味着,您正在尝试返回一个对象,而这并不是您真正想要的。因此,您应该将其更改为:
return authenticated ? (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
) : (
<Popover overlayClassName="gx-popover-horizantal" placement="bottomRight" content={userMenuOptions}
trigger="click">
<Avatar src={require("assets/images/w-logo.png")}
className="gx-avatar gx-pointer" alt="" />
</Popover>
);