React嵌套三元在渲染为JSX?

Question

正在尝试嵌套三元呈现，但语法似乎不有效?

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>
);
}

Answer 1

这些括号和花括号让你迷失了方向。我不知道是谁开始把每一块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>;
}

Answer 2

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

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

Answer 3

这应该可以完成工作:

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

Answer 4

我个人觉得使用React.Fragments更容易阅读，例如:

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>
);
}