我可以在另一个条件中使用条件渲染吗？

Question

所以这就是我正在尝试做的事情..

• 如果没有未读消息，则显示“你都忙完了！”
• 如果恰好有 1 条未读消息，则应显示“您有 1 条未读消息”
• 如果有>1条未读消息，显示“您有未读消息

return (
  <div>
  {
    {messages.length} > 1 ?
      <h1>You have {messages.length} unread messages!</h1> : 
      {{messages.length} === 0 ? 
         <p>You have no unread messages</p> : 
         <p>You have 1 messages</p> 
      }
    }
  }
</div>
);

Answer 1

您需要修复代码中的花括号。尝试下面的代码。

<div>
 {messages.length > 1 ? (
   <h1>You have {messages.length} unread messages!</h1>
 ) : messages.length === 0 ? (
   <p>You're all caught up!</p>
 ) : (
   <p>You have 1 unread message</p>
 )}
</div>