解析意外令牌

问题描述 投票:0回答:2

我的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);
javascript reactjs
2个回答
0
投票

您必须将所有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>
    );

0
投票

问题出在那一行,因为您要返回

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>
          );
© www.soinside.com 2019 - 2024. All rights reserved.