Будет ли слишком много условных выражений нарушать HOC в React?

Question

Я пытаюсь сделать простой Компонент высшего порядка в реакции. Предполагается, что он должен визуализировать <Link/> на основе некоторых реквизитов, которые я использую в условных выражениях для рендеринга моего элемента.

Я думаю, что проблема в одном случае - мой желаемый результат - кнопка, которая будет отображать Log out, еслизначения isLoggedIn и anchorText являются ложными, а Log in, если они истинны ...

И

Iхотите, чтобы этот универсальный компонент отображал элемент isLoggedIn, а реквизиты anchorText были истинными и ничего не возвращали, т.е. null, если ложь ...

Вот это 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

Ваше второе условное недоступно недоступно.

В первом условном условии вы всегда возвращаетесь из функции. Если вы вошли в систему и текст привязки не определен, вы вернетесь из функции. В во всех других случаях вы возвращаетесь из функции.

Чтобы исправить это, вы хотите продолжить проверку других условий внутри вашего 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>
 }