Operator Ternary untuk Penyata If/Else if/Else

Question

Saya cuba melakukan beberapa penggayaan bersyarat dalam Reactjs. 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 pada elemen sama sekali, walaupun saiz skrin ialah >993px. satu

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 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

. 🎜