If/Else if/Else 语句的三元运算符

Question

我正在尝试在 React js 中做一些条件样式。反应非常新，所以可能有更好的方法来做到这一点，但在互联网上搜索无济于事。我正在尝试根据所述屏幕尺寸检查屏幕尺寸和样式。在这个用例中，我想根据屏幕尺寸将一些文本居中。有人可以告诉我是否有更好的方法来做到这一点？目前这对我不起作用。

编辑：在那里放置了一些日志，它所做的正是当页面加载时“textAlign”根本不应用于元素，即使屏幕尺寸是 > 993px。一旦我将屏幕缩小到 < 993px 并且 > 578px 就会将“textAlign：center”应用于元素，然后一旦它缩小到 < 578px，它不会将其设置回无。它使其保持居中。

const styles = {
    footerColOne:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : "80px",
        paddingTop: deviceSize < 993 ? "28px" : "63px",
    },
    footerColTwo:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : deviceSize < 578 ? "51px" : "50px",
        paddingTop: deviceSize < 993 ? "40px" : "86px",
    },
  }

然后我这样称呼这种风格

<Col lg={3} style={ styles.footerColOne }>

非常感谢任何帮助。

上次编辑：

所以我发现媒体查询确实是这里的首选方式，尽管我犯了一个白痴错误并且当该属性不存在该值时将 textAlign 设置为 none ，但我上面的三元条件有效。在这种情况下，应将其设置为 initial。

Answer 1

雷雷

Answer 2

media query 非常适合这里。

@media screen and (min-width: 578px) and (max-width: 993px) {
  .someclass {
   text-align:center;
  }
}

@media screen and (max-width: 993px) {
  .someclass {
   text-align:center;
   padding-left:26px;
   padding-right:28px;
  }
}

@media screen and (min-width: 993px) {
  .someclass {
    text-align:left /* none as you wanted. /*;
  }
}

既然如此，

max-width 如果屏幕尺寸低于此 max-width，则将应用此 media 查询 中的所有样式。

如果屏幕尺寸大于min-width，则将应用此media查询中的所有样式。