如何根據條件呈現JSX？

Question

如何添加類似：

if(true) <Reminder /> else <div>hehe</div> 

在普通的方法是什麼？我知道，我可以使用<Reminder />創建兩個return聲明，但不使用<Reminder />，但我不想重複代碼。

這是我到目前爲止有：

renderReminders() { 
    const { reminders } = this.props; 
    return (
     <ListGroup> 
     { 
      reminders.map(reminder => { 
      return (
       <ListGroupItem key={reminder.id}> 
       <div>{reminder.text}</div> 
       <Reminder dueDate={reminder.dueDate} /> 
       </ListGroupItem> 
      ) 
      }) 
     } 
     </ListGroup> 
    ) // return 
    } // renderReminders 

Answer 1

你可以使用一個ternary operator：

{condition ? 
    <div>I will render when condition is true!</div> 
    : 
    <div>I will render when condition is false!</div> 
} 

這將使用內聯JSX表達基於condition有條件地呈現JSX。例如：

return (
    <ListGroupItem key={reminder.id}> 
    <div>{reminder.text}</div> 
    {true ? 
     <Reminder dueDate={reminder.dueDate} /> 
     : 
     <div>Hehe!</div> 
    } 
    </ListGroupItem> 
)