Operator Ternary untuk Penyata If/Else if/Else

Question

Saya cuba melakukan penggayaan bersyarat dalam React js. Saya sangat baru dalam React jadi mungkin ada cara yang lebih baik untuk melakukan ini, tetapi mencari di Internet tidak berjaya. Saya cuba menyemak saiz dan gaya skrin berdasarkan saiz skrin tersebut. Dalam kes penggunaan ini, saya ingin memusatkan beberapa teks berdasarkan saiz skrin. Bolehkah seseorang memberitahu saya jika ada cara yang lebih baik untuk melakukan ini? Pada masa ini ini tidak berfungsi untuk saya.

EDIT: Meletakkan beberapa log di sana dan apa yang dilakukannya ialah apabila halaman memuatkan "textAlign" tidak digunakan sama sekali pada elemen, walaupun saiz skrin ialah > Setelah saya mengecilkan skrin kepada < 993px dan > Ia memastikan ia berpusat.

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

Kemudian saya panggil gaya ini

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

Sebarang bantuan amatlah dihargai.

Suntingan terakhir:

Jadi saya mendapati bahawa pertanyaan media sememangnya cara yang diutamakan di sini, walaupun saya membuat kesilapan bodoh dan menambah textAlign 设置为 none ，但我上面的三元条件有效。在这种情况下，应将其设置为 initial apabila nilai itu tidak wujud untuk harta itu.

Answer 1

const getDevice = (deviceSize) => 
    deviceSize < 993 
        ? (deviceSize < 993 && 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 Sangat sesuai di sini.

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

Dalam kes itu,

Semua gaya dalam

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

Semua gaya dalam min-width，则将应用此media查询jika saiz skrin lebih besar daripada

. 🎜