React中在render内使用嵌套三元表达式渲染JSX的语法问题

你代码里的嵌套三元表达式外层额外加了{}，这是多余的——因为整个表达式已经处于JSX的{}代码块中，内部的JS逻辑不需要再重复包裹{}，这会触发语法错误。

修正后的代码 #

export default function App() {
  const toggle = true;
  const toggle2 = true;

  return (
    <div className="App">
      {toggle ? (
        <div>true</div>
      ) : (
        toggle2 ? (
          <div>false, true</div>
        ) : (
          <div>false, false</div>
        )
      )}
    </div>
  );
}

补充优化：抽离表达式提升可读性 #

如果嵌套逻辑复杂，建议把内容抽成变量，让代码更清晰：

export default function App() {
  const toggle = true;
  const toggle2 = true;
  
  const displayContent = toggle 
    ? <div>true</div> 
    : (toggle2 ? <div>false, true</div> : <div>false, false</div>);

  return (
    <div className="App">
      {displayContent}
    </div>
  );
}

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