React JSX 中的“if () {} else {}”语句？答案

【问题标题】：'if () {} else {}' statement in React JSX?React JSX 中的“if () {} else {}”语句？
【发布时间】：2020-01-27 23:08:30
【问题描述】：

我只是想在一些 JSX 中的 React 中使用 if/else 语句，但我得到一个“解析错误：意外令牌”。示例三元语句似乎工作正常。在 JSX 中不能使用 if/else 语句吗？

  ./src/App.js
  Line 288:  Parsing error: Unexpected token

  286 |                   { this.getInvitesForEvent(dat.id, 
  this.invitesForEventData) }
  287 |                   { true === 1 ? 'empty set' : 'has results' }
> 288 |                   { if (true) { true } else { false } }
  |                         ^
  289 |                 </div>
  290 |               ))
  291 |           }

【问题讨论】：

请连同错误信息一起显示代码。
你不能在 JSX 中使用语句，只能使用表达式。在 JSX 中使用三元运算符是很常见的

标签： javascript reactjs

【解决方案1】：

要在 jsx 中使用 if/else，你可以做 {condition ? results : 不满足条件的结果} 例如，如果你想在有人登录时呈现主页，但如果他们没有登录，你会这样做：

{ loggedIn ? <Home /> : <Login /> }

“条件/变量？”充当“if 条件/变量”，“:”充当 else。

【讨论】：

【解决方案2】：

你不能在 jsx 中这样做，因为只有表达式可以放在 jsx 中，而不是语句。如果三元表达式不方便或难以辨认，您可以考虑在 jsx 之外执行 if 语句

let val;
if (/*whatever*/) {
  val = true;
else {
  val = false;
}

return (
  <div>
    {val}
  </div>
)

至于为什么会有这个限制，记住 jsx 被转译成什么可能会有所帮助。做<div>Hello</div>变成React.createElement("div", null, "Hello");，做<div>{true ? 'true' : 'false'}</div>变成React.createElement("div", null, true ? 'true' : 'false');

那么<div>{if (true) { 'true' } else { 'false ' }}</div> 会转换成什么？ React.createElement("div", null, if (true) { 'true' } else { 'false ' }); 之类的东西，但在该代码中间放置 if 语句是非法的。所以放在jsx中间也是违法的。

【讨论】：