Question

我有一个道具isStatic传递给一个组件。当isStatic===false时，我有JSX设置来阻止我的组件渲染两个子组件。例如：

  return (
    <div className={classes}>
      {!isStatic && <MenuOne className={menuTriggerClass} appNavItems {appNavItems} mergedNavbarOrder={mergedNavbarOrder} /> }
      <NavbarTitle unconfirmedCount={unconfirmedCount} />
      {!isStatic && <MenuTwo className={menuTriggerClass} />}
   </div>)

NavBarTitle需要在MenuOne和MenuTwo之间呈现。但是，我不喜欢这对于isStatic的两次检查。在这种情况下使用三元运算符并将其分开是否有意义？

Answer 1

我认为无论如何，你的代码都不会100％干，因为Navbar需要在两者之间呈现，无论如何。您可以检查isStatic两次，或者为三元组写两个结果，两者都返回Navbar组件，如下所示：

return (
  <div className={classes}>
    {!isStatic 
      ? (
          <MenuOne className={menuTriggerClass} appNavItems {appNavItems} mergedNavbarOrder={mergedNavbarOrder} />
          <NavbarTitle unconfirmedCount={unconfirmedCount} />
          <MenuTwo className={menuTriggerClass} />}
        )
      : <NavbarTitle unconfirmedCount={unconfirmedCount} />}
  </div>

或者，您可以创建一个辅助函数，以便在isStatic返回true时返回所需的jsx。这将使你在返回语句中的三元组更具可读性：

const whenStatic = () => {
  return (
    <MenuOne className={menuTriggerClass} appNavItems {appNavItems} mergedNavbarOrder={mergedNavbarOrder} />
    <NavbarTitle unconfirmedCount={unconfirmedCount} />
    <MenuTwo className={menuTriggerClass} />}
  )
}

return (
  <div className={classes}>
    {!isStatic 
      ? whenStatic()
      : <NavbarTitle unconfirmedCount={unconfirmedCount} />}
  </div>

Answer 2

您可以考虑执行以下操作：

＆＃13;

  return (
    <div className={classes}>
      {this.renderMenuItem(isStatic)}
      <NavbarTitle unconfirmedCount={unconfirmedCount} />
   </div>)
   
 renderMenuItem = (isStatic) => {
 isStatic? return (<MenuTwo className={menuTriggerClass}):
    return ( <MenuOne className={menuTriggerClass} appNavItems {appNavItems} mergedNavbarOrder={mergedNavbarOrder} )
  
 }

＆＃13;

没有两个if语句的条件渲染

2 个答案: