英文:
Is it possible to put ternary conditional operator inside the other ternary conditional operator in jsx
问题
我试图实现我在话题中提到的内容。我尝试了我找到的所有方法，甚至不知道是否可能。你能帮助我吗？
<>
{
(isLoading) ?
<CircularProgress />
:
{isTablet ? <MobileMenu /> : <Menu />}
<Box
sx={{
display: "flex",
flexDirection: { laptop: "row", mobile: "column" },
justifyContent: "center",
gap: "0px 100px",
mt: {
tablet: "40px"
},
maxWidth: "1920px",
marginInline: "auto"
}}
onClick={() => {
console.log(product);
}}
>
{isMobile ? <MobileGallery /> : <Gallery />}
<Description product={product} />
</Box>
}
</>
这是您提供的代码片段的翻译部分。
英文:
I am trying to do what I mentioned in topic. I tried all methods I found and I dont even know if it is possible. Could you please help me?
<>
{
(isLoading) ?
<CircularProgress />
:
{isTablet ? <MobileMenu /> : <Menu />}
<Box
sx={{
display: "flex",
flexDirection: { laptop: "row", mobile: "column" },
justifyContent: "center",
gap: "0px 100px",
mt: {
tablet: "40px"
},
maxWidth: "1920px",
marginInline: "auto"
}}
onClick={() => {
console.log(product);
}}
>
{isMobile ? <MobileGallery /> : <Gallery />}
<Description product={product} />
</Box>}
</>
答案1
得分: 1
是的，三元条件运算符的任何组件都是一个表达式。由于三元条件运算符本身也是一个表达式，它可以用作任何这样的组件。表达式可以无限嵌套。
看起来你的问题只是一个JSX语法错误。简化你展示的内容，这个结构是不正确的：
{
isLoading ?
<CircularProgress /> :
{isTablet ? <MobileMenu /> : <Menu />}
}
这个"内部"的花括号是不必要的，会破坏语言解析。在语法的这一点上，它会期望{来指示对象文字的开始，这不是代码的预期行为。
你可以简单地移除它们：
{
isLoading ?
<CircularProgress /> :
isTablet ? <MobileMenu /> : <Menu />
}
出于清晰性和/或个人偏好，你还可以将该表达式括在括号中：
{
isLoading ?
<CircularProgress /> :
(isTablet ? <MobileMenu /> : <Menu />)
}
缩进是指示嵌套表达式的另一个选项：
{
isLoading ?
<CircularProgress /> :
isTablet ?
<MobileMenu /> :
<Menu />
}
英文:
Yes, any given component of the ternary conditional operator is an expression. And since the ternary conditional operator itself is an expression, it can be used as any such component. Expressions can be nested infinitely.
It appears that what you have is simply a JSX syntax error. Simplifying what you're showing, this structure is incorrect:
{
isLoading ?
<CircularProgress /> :
{isTablet ? <MobileMenu /> : <Menu />}
}
The "inner" set of curly braces are unnecessary and will break the language parsing. At this point in the syntax it would be expecting { to indicate the start of an object literal, which isn't what the code is doing.
You can simply remove them:
{
isLoading ?
<CircularProgress /> :
isTablet ? <MobileMenu /> : <Menu />
}
For clarity and/or personal preference you can also wrap that expression in parentheses:
{
isLoading ?
<CircularProgress /> :
(isTablet ? <MobileMenu /> : <Menu />)
}
Indentation is another option to indicate the nested expressions:
{
isLoading ?
<CircularProgress /> :
isTablet ?
<MobileMenu /> :
<Menu />
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论