你会对这些括号和花括号感到困惑，我不知道是谁开始把JSX的每一段都用括号括起来的，但是你不需要它，对我来说，它通常只是噪音。

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;

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

添加一个额外的{}。它应该是：

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

这应该可以完成任务：

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

我个人发现使用React.Fragment s时更容易阅读，例如：

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

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

但是，您可以省略第二对大括号和React.Fragment，以使其更紧凑：

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

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