条件渲染反应组件答案

【问题标题】：conditional rendering react component [duplicate]条件渲染反应组件
【发布时间】：2020-07-31 03:55:29
【问题描述】：

问题陈述 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)

如果用户是管理员，我想向他展示一个将他链接到管理员页面的图标，否则，我想将他带到用户页面。

【问题讨论】：

我们可能需要更多代码。你在哪里写这个？在你的渲染中？
您编辑的代码看起来不错。如果没有三元组，任何一个链接都可以工作吗？
它们在没有三元组的情况下工作。如果我不将它们包含在一对括号和元素中，它们也会起作用。我想要链接元素，以便用户可以访问这些链接。
这是我去掉括号``` 3 | ///////////////////////////////////////// ////////////////////////// 4 | // startsWith(string, search) - 检查string 是否以search 开头 5 | var startsWith = function startsWith(string, search) { > 6 |返回 string.substr(0, search.length) === 搜索； 7 | }; 8 | 9 | ///////////////////////////////////////// ////////////////////////// ```
括号不是必需的，所以删除它们是否有效？还是您的评论有误

标签： reactjs react-functional-component

【解决方案1】：

你可以在 JSX 中使用它吗？

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

【讨论】：

【解决方案2】：

你返回的不是 React 组件而是一个函数，所以试试这个：

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

【讨论】：

【解决方案3】：

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

【讨论】：

希望对您有所帮助。如果它有效，如果您将我的答案标记为正确，我会很高兴:)