Question

问题陈述 条件渲染时未加载React元素

我到目前为止所做的事情

我有一个简单的条件，我想根据此条件渲染组件。这是它的样子。我想在true时渲染IoMdAdd

true
  ? (()=>(<Link><IoMdAdd size="25"/></Link>))
  : (()=>(<Link><IoIosHeartEmpty size="25"/></Link>))

相反，我想在条件为假时显示IoIosHeartEmpty

false
  ? (()=>(<Link><IoMdAdd size="25"/></Link>))
  : (()=>(<Link><IoIosHeartEmpty size="25"/></Link>))

当前行为 它什么也没显示。当我检查元素时，元素不会出现在dom中。

预期的行为 根据条件显示组件之一

修改由于大家都在要求更多代码，所以让我粘贴整个组件

import React, { Component } from "react";
import { Link } from "@reach/router";
import { IoIosHeartEmpty, IoMdAdd } from "react-icons/io";
import { connect } from "react-redux"
class Header extends Component {
    render() {
        return (

            <div className="wishlist-icon">
                {(localStorage.getItem("accessLevel") == "Admin" && this.state.loggedInUser.accessLevel == "Admin") ? (<Link to="AdminPage"><IoMdAdd size="25" /></Link>) : (<Link to="UserPage"><IoIosHeartEmpty size="25" /></Link>)}
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        loggedInUser: state.loggedInUser
    }
}
export default connect(mapStateToProps)(Header)

如果用户是admin，我想给他看一个图标，该图标将他链接到admin页面，否则，我想带他去用户页面。

Answer 1

{true? 
  <Link><IoMdAdd size="25"/></Link>
: <Link><IoIosHeartEmpty size="25"/></Link>
}

Answer 2

您可以在JSX中使用它吗？

{myBool ? (
  <Link><IoMdAdd size="25"/></Link>
) : (
  <Link><IoIosHeartEmpty size="25"/></Link>
)}

Answer 3

您不会返回React组件，而是返回一个函数，因此请尝试以下操作：

true
  ? (<Link><IoMdAdd size="25"/></Link>)
  : (<Link><IoIosHeartEmpty size="25"/></Link>)

条件渲染反应组件

3 个答案: