有太多条件会破坏 React 中的 HOC 吗？

Question

我正在尝试做一个简单的 Higher Order Component 反应。它应该根据我在条件中使用的一些道具来呈现 <Link/> 来呈现我的元素。

我认为在一个实例中我想要的结果是一个按钮，如果 isLoggedIn 和 anchorText 属性都是 false 并且 Log in 如果他们真的...

AND

我希望该通用组件呈现一个元素 isLoggedIn 并且 anchorText 属性为 true 而 return 什么都没有，即 null 如果为 false...

这是 HOC：

function GenericLoggedInLink({ isLoggedIn, logOutUser, route,anchorText }) {
 if ((isLoggedIn) && (anchorText === undefined)) {
  return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
 } else {
  return <Link href="/login"><a>Log in!</a></Link>
 }
 if ((isLoggedIn) && (anchorText)) {
 return <Menu.Item><Link href={route}><a>{anchorText}</a></Link></Menu.Item>
 } else {
  return null;
 }
}

这些是正在使用的组件；

<Menu.Item>
  <GenericLoggedInLink
    isLoggedIn={isLoggedIn}
    route="/profile"
    anchorText="Profile"
   />
   </Menu.Item>
   <Menu.Item>
    <GenericLoggedInLink
      isLoggedIn={isLoggedIn}
      route="/dashboard"
      anchorText="Dashboard"
     />
   </Menu.Item>

<Menu.Item position='right'>
  <Button inverted={!fixed}>
   <GenericLoggedInLink 
    isLoggedIn={isLoggedIn}    
    logOutUser={logOutUser}/>
 </Button>
</Menu.Item>

在 VS 代码中，我实际上得到一个错误，第二个条件是无法访问的？有人可以帮忙吗？

更新

我尝试了 Cereal 的建议，但现在当道具 isLoggedIn === false 时 Log In 是正确的，但其他链接显示：

Answer 1

您的第二个条件无法访问。

在你的第一个条件中，你 always return 来自函数。如果您已登录且锚文本未定义，则您 return 来自函数。在所有其他情况下你return来自函数。

要解决此问题，您需要继续检查 else 中的其他条件。

 if(isLoggedIn) {
   if(anchorText === undefined) {
     return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
   } else if(anchorText) {
     return <Menu.Item><Link href={route}><a>{anchorText}</a></Link></Menu.Item>
   } else {
     return null;
   }
 } else {
   return <Link href="/login"><a>Log in!</a></Link>
 }

有太多条件会破坏 React 中的 HOC 吗？

Will having too many conditionals break a HOC in React?

javascript

reactjs

higher-order-functions

higher-order-components

mutation