Ternärer Operator für If/Else if/Else-Anweisungen

Question

Ich versuche, in React js ein bedingtes Styling durchzuführen. Ich bin ein React-Neuling, daher gibt es vielleicht eine bessere Möglichkeit, dies zu tun, aber die Suche im Internet vergeblich. Ich versuche, die Bildschirmgröße und den Stil anhand dieser Bildschirmgröße zu überprüfen. In diesem Anwendungsfall möchte ich Text basierend auf der Bildschirmgröße zentrieren. Kann mir jemand sagen, ob es einen besseren Weg gibt, dies zu tun? Derzeit funktioniert das bei mir nicht.

BEARBEITEN: Wenn Sie dort einige Protokolle einfügen, wird „textAlign“ beim Laden der Seite überhaupt nicht auf das Element angewendet, obwohl die Bildschirmgröße > Sobald ich den Bildschirm auf < 993px und > verkleinere, wird „textAlign:center“ auf das Element angewendet. Es hält es zentriert.

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",
    },
  }

Dann nenne ich diesen Stil

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

Jede Hilfe wird sehr geschätzt.

Letzte Änderung:

Ich habe also herausgefunden, dass Medienabfragen hier tatsächlich der bevorzugte Weg sind, obwohl ich einen Idiotenfehler gemacht habe und textAlign 设置为 none ，但我上面的三元条件有效。在这种情况下，应将其设置为 initial hinzugefügt habe, als der Wert für die Immobilie nicht vorhanden war.

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