JSX ifodalari (Expressions)

JSX’ning eng kuchli xususiyatlaridan biri bu elementlar daraxti ichida kodni bajarish imkoniyatidir. JSX’ning ichki mexanizmi bobida aytib o’tganimizdek, ro’yxat bo’ylab iteratsiya qilish uchun map metodi bilan, jingalak qavslar ichiga bajariladigan kodni qo’yishimiz mumkin. Agar JSX’da ikki sonning yig’indisini ko’rsatmoqchi bo’lsak, buni quyidagicha qilamiz:

Sodda JSX ifodasi

const a = 1;
const b = 2;
 
const MyComponent = () => <Box>Mana bu ifoda: {a + b}</Box>;

Bu kod Mana bu ifoda: 3 natijasini chiqaradi, chunki jingalak qavslar ichidagi narsa ifoda(expression) sifatida bajariladi. JSX ifodalari yordamida biz ro’yxatlar bo’ylab iteratsiya qilishimiz va ternary amallar, satrni almashtirish va boshqalarni qo’llagan holda turli ifodalarni bajarishimiz mumkin.

Ternary operatori bilan JSX ifodasi

Mana bu yerda, ternary operatori bilan shartni tekshirish misoli:

const a = 1;
const b = 2;
const MyComponent = () => <Box>b, a’dan ko'ra kattami? {b > a ? "HA" : "YO'Q"}</Box>;

Bu kod b, a’dan ko'ra kattami? HA natijasini chiqaradi, chunki bu solishtirish ifoda sifatida bajariladi. Shu yerda ta’kidlash joizki, JSX ifodalari aniq shunday — ifodalardir. JSX elementlari daraxti ichida bayonot(statement)larni bajarish mumkin emas.

Quyidagi kod ishlamaydi:

const MyComponent = () => <Box>Mana bu ifoda: {
    const a = 1;
    const b = 2;
 
    if (a > b) {
            3
        }
}</Box>;

U ishlamaydi, chunki bayonotlar hech narsa qaytarmaydi va ular side effect’lar deb hisoblanadi: ular holatni o’zgartiradi, lekin hech qanday qiymat bermaydi. Bayonotlar va hisoblashlardan keyin qanday qilib qiymatni satr ichida chop qilish mumkin? 6-qatorda biz shunchaki 3 raqamini joylashtirdik. Renderlovchi biz 3 raqamini chop qilishni mo’ljallaganimizni qanday bilishi kerak? Shuning uchun ifodalar bajariladi, ammo bayonotlar bajarilmaydi.