Ternary Operator for If/Else if/Else Statements-PHP中文网问答

我正在尝试在 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。

const getDevice = (deviceSize) => deviceSize 578) ? 'tablet' : 'mobile' : 'web' // if declare css -> return class // component use className instead of styles // const footerColOne = { 'web': () => { return { textAlign: 'none', paddingLeft: '26px', paddingTop: '28px' } }, 'tablet': () => { return { textAlign: 'center', paddingLeft: '80px', paddingTop: '63px' } }, 'mobile': () => { return { textAlign: 'none', paddingLeft: '80px', paddingTop: '63px' } } } const styles = { footerColOne: footerColOne[getDevice(deviceSize)]() } console.log(styles.footerColOne) //

@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. /*; } }