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

Question

Ich versuche, in Reactjs 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 > 993 Pixel beträgt. eins

P粉785905797 · Answer

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)

//

P粉831310404 · Answer

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