Opérateur ternaire pour les instructions If/Else if/Else

Question

J'essaie de faire du style conditionnel dans React js. Je suis très nouveau sur React, il existe donc peut-être une meilleure façon de procéder, mais la recherche sur Internet n'a servi à rien. J'essaie de vérifier la taille et le style de l'écran en fonction de ladite taille d'écran. Dans ce cas d'utilisation, je souhaite centrer du texte en fonction de la taille de l'écran. Quelqu'un peut-il me dire s'il existe une meilleure façon de procéder ? Actuellement, cela ne fonctionne pas pour moi.

EDIT : y mettre quelques journaux et cela fait que lorsque la page se charge, "textAlign" n'est pas du tout appliqué à l'élément, même si la taille de l'écran est > Une fois que j'ai réduit l'écran à < 993px et > 578px, il applique "textAlign:center" à l'élément, puis une fois qu'il est réduit à < Cela le maintient centré.

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

Ensuite, j'appelle ce style

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

Toute aide est grandement appréciée.

Dernière édition :

J'ai donc trouvé que les requêtes média sont effectivement la méthode privilégiée ici, même si j'ai commis une erreur idiote et ajouté textAlign 设置为 none ，但我上面的三元条件有效。在这种情况下，应将其设置为 initial lorsque la valeur n'existait pas pour la propriété.

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 Ajustement parfait ici.

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

Dans ce cas,

Tous les styles en

max-width 如果屏幕尺寸低于此 max-width，则将应用此 media 查询 .

Tous les styles en min-width，则将应用此media查询si la taille de l'écran est supérieure à

. 🎜