Question

代码工作正常，应用程序运行非常流畅。但是对于if语句，我觉得有什么方法可以将其重构得更简洁？我认为else子句很好，我只是不太确定该怎么做。我希望它尽可能简洁，但是找不到其他写法。 2之间的区别是p元素，它是显示的消息，然后在创建第一个li时消失。因此，在我的if块中，我具有与else子句中相同的代码。首先需要if块中的所有代码来运行该应用程序。感谢您的帮助！

 if(guests.length < 1){
       return(

     <div className="App">
       <Header />
       <AddGuest
       guest={props.guest}
       addGuest={props.addGuest}
       updatePendingGuestValue={props.updatePendingGuestValue}
       pendingGuest={props.pendingGuest}
       />

       <p className='intro-message'>Invite some friends and family! Confirm your guests,
       change their names if needed, remove the guest or filter through your guest who
       have/have not confirmed. Get started above!</p>

       <PendingGuestLi
         pendingGuest={props.pendingGuest} />
     </div>
 )
  }else{
     return(    
     <div className="App">
      <Header />
      <AddGuest
      guest={props.guest}
      addGuest={props.addGuest}
      updatePendingGuestValue={props.updatePendingGuestValue}
      pendingGuest={props.pendingGuest}
      />

     <div className='filter-checkbox-container'>
       <label className='filter-guests-label'>Hide all unconfirmed guest
         <input type='checkbox' className='filter-guests-checkbox'
         value={props.filterUnconfirmedGuest} onChange={props.toggleFilterUnconfirmedGuest} />
       </label>
     </div>

     <GuestList
       guest={props.guest}
       toggleGuestConfirmed={props.toggleGuestConfirmed}
       toggleEditGuest={props.toggleEditGuest}
       editGuest={props.editGuest}
       removeGuest={props.removeGuest}
       filterUnconfirmedGuest={props.filterUnconfirmedGuest}
        />
     <PendingGuestLi
       pendingGuest={props.pendingGuest} />
   </div>
     )
   }

感谢您签出！

Answer 1

将保持不变的内容和更改的内容分开，并将其放置在块中。


  return(
    <div className="App">
      <Header />
      <AddGuest
        guest={props.guest}
        addGuest={props.addGuest}
        updatePendingGuestValue={props.updatePendingGuestValue}
        pendingGuest={props.pendingGuest}
      />
      {(guests.length < 1) ?
          <p className='intro-message'>
            Invite some friends and family! Confirm your guests,
            change their names if needed, remove the guest or filter through your guest who
            have/have not confirmed. Get started above!
          </p>
        :
         <Fragment>
          <div className='filter-checkbox-container'>
            <label className='filter-guests-label'>Hide all unconfirmed guest
              <input type='checkbox' className='filter-guests-checkbox'
              value={props.filterUnconfirmedGuest} onChange={props.toggleFilterUnconfirmedGuest} />
            </label>
          </div>
          <GuestList
            guest={props.guest}
            toggleGuestConfirmed={props.toggleGuestConfirmed}
            toggleEditGuest={props.toggleEditGuest}
            editGuest={props.editGuest}
            removeGuest={props.removeGuest}
            filterUnconfirmedGuest={props.filterUnconfirmedGuest}
             />
          </Fragment>
      }
      <PendingGuestLi
        pendingGuest={props.pendingGuest} />
      </div>
  )

有没有一种方法可以重构此代码以使其更简洁？

1 个答案: