为什么我的反应标题根本不呈现？

Question

所以我有一个名为Header的组件将根据用户是否登录显示导航栏，我传递的道具是来自父组件的prop，返回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

你应该使用es6解构：

const { isLoggedIn } = props;

如果你没有对你的道具进行破坏，你就没有从isLoggedIn得到正确的值，所以你不会返回任何东西（因此错误）。

也不需要检查是否为false，只需执行：

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

---

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

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

Answer 2

如果isLoggedIn是undefined然后isLoggedIn === false评估false导致你的组件不返回任何东西并导致你看到的错误。

---

将您的else条款更改为：

else {
  return <GuestGreeting />;
}

...或者@Isaac指出，完全删除else并执行此操作：

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

......那应该解决它。

---

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