Question

我只是试图在某些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 |           }

Answer 1

您无法在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中间也是非法的。

Answer 2

要在 jsx 中使用 if/else，您可以执行 {condition ?结果：不满足条件时的结果} 例如，如果您想在有人登录时呈现主页，但如果未登录则呈现登录页面，您可以这样做：

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

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

React JSX中的'if（）{} else {}'语句？

2 个答案: