javascript - 如何根据条件渲染 JSX？

Question

我如何添加类似的内容:

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

以普通方式？我知道，我可以创建两个return带有 <Reminder /> 的语句并且没有 <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>
)