如何根据条件呈现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> 
)