Javascript 为什么JSX内部没有if？

我在React文档中找到了创建基于函数的

组件的代码：

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Bonjour !</h1>
      {unreadMessages.length > 0 &&
        <h2>
          Vous avez {unreadMessages.length} message(s) non-lu(s).
        </h2>
      }
    </div>
  );
}

功能邮箱（道具）{
const unreadMessages=props.unreadMessages；
返回(
你好！
{unreadMessages.length>0&&
Vous avez{unreadMessages.length}消息非lu。
}
);
}

为什么在JSX标记中，
{
指示开始将以下内容解释为JavaScript表达式（可能包括JSX），而不是无条件的JSX。
中的表达式
然后本质上被插入到外部JSX中

但是
如果在需要JavaScript表达式（即计算为值的内容）的地方不存在
。出于同样的原因，以下是语法错误：


const thisinvalid=if（true）'yes'；
if else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法糖

JSX从根本上说是语法糖。编译后，JSX表达式成为常规JavaScript函数调用，并对JavaScript对象求值。我们可以将任何JavaScript表达式用大括号括起来嵌入JSX中

关于这一点的更多解释
您不能将
if
放在JSX中，因为所有JSX都在
{}
s需要是表达式。否则，这是vanilla JS short citcuiting布尔条件。如果
&&
的左侧为false，则JS从不计算右侧并立即返回false，不呈现任何内容，否则返回右侧的元素。这是否回答了您的问题？