Ternary Operator for If/Else if/Else Statements

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

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)

// 

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查询中的所有样式。