reactjs 在jsx中，是否可以将三元条件运算符放在另一个三元条件运算符中

yfwxisqw 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(129)

我正在努力做我在主题中提到的事情。我尝试了我发现的所有方法，我甚至不知道是否可行。你能帮助我吗？

<>
          {
          (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>}
          
    
        </>

reactjs

来源：https://stackoverflow.com/questions/75794041/is-it-possible-to-put-ternary-conditional-operator-inside-the-other-ternary-cond

1条答案

按热度按时间

kmbjn2e31#

是的，三元条件运算符的任何给定组件都是一个表达式。由于三元条件运算符 * 本身 * 是一个表达式，它可以用作任何这样的组件。表达式可以无限嵌套。
看起来你所拥有的只是一个JSX语法错误。简化你所展示的内容，这个结构是不正确的：

{
  isLoading ? 
  <CircularProgress /> : 
  {isTablet ? <MobileMenu /> : <Menu />}
}

花括号的“内部”集合是不必要的，并且会破坏语言解析。在语法的这一点上，它将期望{指示对象文字的开始，这不是代码正在做的事情。
您可以简单地删除它们：

{
  isLoading ? 
  <CircularProgress /> : 
  isTablet ? <MobileMenu /> : <Menu />
}

为了清楚和/或个人偏好，您也可以将该表达式括在括号中：

{
  isLoading ? 
  <CircularProgress /> : 
  (isTablet ? <MobileMenu /> : <Menu />)
}

缩进是指示嵌套表达式的另一个选项：

{
  isLoading ? 
    <CircularProgress /> : 
    isTablet ?
      <MobileMenu /> :
      <Menu />
}

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs 在jsx中，是否可以将三元条件运算符放在另一个三元条件运算符中

1条答案

相关问题

热门标签

最新问答