Javascript 为什么我的react标头根本不渲染？

因此，我有一个名为Header的组件，它将根据用户是否登录显示导航栏，我传递的道具是来自父组件的道具，它返回true，因为用户在登录后已通过身份验证

应用程序

 <Header IsLoggedIn={this.state.IsLoggedIn} />  

然后这是我的头组件，没有呈现

标题

// stateless functional component
import React from 'react';
import { NavLink } from 'react-router-dom'; //import Navlink to create nav links and to put active class on any link that is active
import UserGreeting from './UserGreeting'
import GuestGreeting from './GuestGreeting'
/*Header- Displays the top menu bar for the application and 
includes buttons for signing in and signing up 
(if there's not an authenticated user) or the user's first and last name 
and a button for signing out (if there's an authenticated user).*/


function Header(props) {
  const isLoggedIn = props;
  console.log(props)
  if (isLoggedIn ===true) {
    return <UserGreeting />;
  }
  else if(isLoggedIn===false) {
    return <GuestGreeting />;
  }
}

export default Header;

//无状态功能组件
从“React”导入React；
从'react router dom'导入{NavLink}//导入导航链接以创建导航链接，并将活动类置于任何活动链接上
从“/UserGreeting”导入UserGreeting
从“/GuestGreeting”导入GuestGreeting
/*Header-显示应用程序的顶部菜单栏和
包括用于登录和注册的按钮
（如果没有经过身份验证的用户）或用户的名字和姓氏
以及用于注销的按钮（如果有经过身份验证的用户）*/
功能标题（道具）{
const isLoggedIn=道具；
控制台日志（道具）
如果（isLoggedIn==真）{
返回；
}
else if（isLoggedIn===false）{
返回；
}
}
导出默认标题；

这是重新加载页面时出现的错误：

---

未捕获不变冲突：标头（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。有人能帮忙吗？

如果

isLoggedIn

是

未定义的

，那么

isLoggedIn===false

计算为

false

，这会导致组件不返回任何内容，并导致您看到的错误

---

将您的

else

子句更改为：

else {
  return <GuestGreeting />;
}

…这应该能解决问题

---

---

啊，@Jose正确地认为应该使用解构：

const{isLoggedIn}=props…这就是为什么
isLoggedIn
首先是
未定义的
。
您应该使用es6解构：


const{isLoggedIn}=props
甚至可以删除替换整个else块，只使用
return
所以我决定使用这个
函数头（props）{const{isLoggedIn}=props；console.log（isLoggedIn）//如果（isLoggedIn）{return；}else{return；}
我现在可以看到这个网站，我仍然可以登录，但是标头没有根据用户的登录状态进行更新，同样当我执行此console.log（isLoggedIn）//这是未定义的，isLoggedIn可能会显示为未定义，因为您正在将isLoggedIn（大写）作为道具传递，而它应该是isLoggedIn。便利道具采用camelCase格式。
if (isLoggedIn === true) {
  return <UserGreeting />;
}
return <GuestGreeting />;