为什么我的react标头根本不呈现？

Question

因此，我有一个称为Header的组件，该组件将显示导航栏，具体取决于用户是否登录，我传递的道具是来自父组件的道具，由于在登录后用户已通过身份验证，因此返回true

应用

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

那么这是我的Header组件没有呈现

头

// 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;

这是我重新加载页面时遇到的错误：

未捕获的不变违规：标头（...）：渲染未返回任何内容。 这通常意味着缺少return语句。 或者，不渲染任何内容，则返回null。 有人可以帮忙吗？

Answer 1

如果isLoggedIn undefined则isLoggedIn === false评估为false ，这将导致您的组件不返回任何内容，并导致您看到的错误。

---

将您的else子句更改为：

else {
  return <GuestGreeting />;
}

...或正如@Isaac指出的那样，完全删除else并执行以下操作：

if (isLoggedIn === true) {
  return <UserGreeting />;
}
return <GuestGreeting />;

...那应该解决它。

---

嗯，@ Jose应该使用解构是正确的： const { isLoggedIn } = props; ...这就是为什么首先要 undefined isLoggedIn 原因 。

Answer 2

您应该使用es6解构：

 const { isLoggedIn } = props; 

如果不破坏道具，则不会从isLoggedIn获得正确的值，因此您不会返回任何内容（因此将返回错误）。

另外也不需要检查是否为假，只需执行以下操作：

 function Header(props) { const { isLoggedIn } = props; if (isLoggedIn) { return <UserGreeting />; } else { return <GuestGreeting />; } } 

---

提示：您可以执行以下操作以保持代码整洁

 const Header = ({ isLoggedIn }) => isLoggedIn ? <UserGreeting /> : <GuestGreeting />