React开发中return语句里能否嵌套使用多层条件判断？

语法合法性结论 #

你给出的多层嵌套三元运算符的写法完全合法。
JSX 的 {} 内部支持任意合法的 JavaScript 表达式，三元运算符本身就支持嵌套使用，属于标准的JS语法，因此你写的代码可以正常运行。

更易读的替代实现方案 #

如果后续分支逻辑变得更复杂，嵌套三元的可读性会明显下降，你可以选择以下更易维护的写法实现相同需求：

方案1：提前声明渲染变量 #

在return之前通过条件判断给渲染变量赋值，逻辑分层清晰：

// 组件内部逻辑
let renderNode
if (loading) {
  renderNode = <Loading/>
} else if (userIsLoggedIn) {
  renderNode = <Redirect to="/login"/>
} else {
  renderNode = <Redirect to="/dashboard"/>
}

return (
  <div id="App">
    {renderNode}
  </div>
)

也可以直接在JSX内使用立即执行函数实现：

return (
  <div id="App">
    {(() => {
      if (loading) return <Loading/>
      if (userIsLoggedIn) return <Redirect to="/login"/>
      return <Redirect to="/dashboard"/>
    })()}
  </div>
)

方案2：抽离为独立渲染函数 #

把渲染逻辑抽离成单独的函数，适合逻辑复用的场景：

function getRenderContent(loading, userIsLoggedIn) {
  if (loading) return <Loading/>
  if (userIsLoggedIn) return <Redirect to="/login"/>
  return <Redirect to="/dashboard"/>
}

// 组件return部分
return (
  <div id="App">
    {getRenderContent(loading, userIsLoggedIn)}
  </div>
)

内容的提问来源于stack exchange，提问作者mattisvensson