javascript - 如何根据身份验证在我的 Reactjs 应用程序中添加 header

Question

我的整个 ReactJs 应用程序中有四个不同的 header 组件。

HeaderA:未经身份验证的用户，
HeaderB : 首次登录用户
HeaderC :非首次用户的经过身份验证的用户。
HeaderD :经过身份验证的用户并指向特定的 url。

我已经尝试过这个，但似乎不起作用。请提出更好的方法。

{!authenticated && (<HeaderA></HeaderA>)}
{authenticated &&  ftu && ftu==="true" && (<HeaderB/>)}
{authenticated &&  ftu && ftu==="false" && pathname==="/" && (<HeaderC/>)}
{authenticated &&  ftu && ftu==="false" && pathname!=="/specificRoute" && pathname!=="/" && (<HeaderD/>)}

Answer 1

您的条件逻辑阻止了某些要渲染的元素，如 if(ftu && ftu === false)永远不可能是真的，因为第一个 FTU 应该是真的。

除非这就是您使用字符串而不是 bool 值来跟踪的原因。但是这样检查 ftu 就没有意义了，因为它永远是 truthy如果它包含 true或false 。仅空字符串""是 falsy 。

相反，我会编写如下逻辑:

const MyComponent = ({authenticated, ftu, pathname}) => {

   const getHeader = () => {
      if(!authenticated) return <HeaderA />
      if(authenticated && ftu) return <HeaderB />
      if(authenticated && !ftu && pathname==="/specificRoute") return <HeaderD />
      if(authenticated && !ftu) return <HeaderC />
      return null; // Maybe return HeaderC here instead.
   }

   return (
      <div>
         {getHeader()}
         <OtherComponent />
         <ThirdComponent />
      </div>
   )
}

使用函数的原因是为了确保只返回一个 header 。如果您在渲染区域内执行 if 逻辑，则可能会面临返回两个(或更多)if 条件为 true 的风险。另外，我将 C 放在 D 之下，因为如果 D 为真，则 C 为真，但当 C 仍然为真时，D 可能为假。

我想 C 将是您的默认 header ，因此如果不满足上述条件，也许可以返回它而不是 null？