在 JSX 渲染中反应嵌套三元？答案

【问题标题】：React nested ternary in render for JSX?在 JSX 渲染中反应嵌套三元？
【发布时间】：2023-01-13 18:45:38
【问题描述】：

正在尝试嵌套三元渲染，但语法似乎无效？

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>
      )
      : (
        <div>false</div>
      )}
    </div>
  );
}

【问题讨论】：

删除包裹嵌套条件的大括号。

标签： javascript reactjs jsx

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这应该做的工作：

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

【讨论】：

【解决方案3】：

你迷失了所有这些括号和花括号。我不知道是谁开始将 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>;
}

【讨论】：