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查詢中的所有樣式。