React JSX atributlari

JSX HTML elementlariga atributlarni kiritish imkonini beradi, biroq bir nechta muhim farqlar mavjud.

class = className

Class atributi HTMLda juda ko‘p qo‘llaniladigan atributdir, lekin JSX JavaScript sifatida ko‘rsatilgan va class kalit so‘zi JavaScript-da zahiralangan so‘z bo‘lgani uchun uni JSX da ishlatishga ruxsat berilmagan.

JSX buni o‘rniga className yordamida hal qildi. JSX ko‘rsatilganda, u className atributlarini class atributlariga aylantiradi.

function Car() {
  return (
    <h1 className="myclass">Hello World</h1>
  );
}

Atributlar sifatida ifodalar

JavaScript ifodalarini atribut qiymatlari sifatida ham ishlatishingiz mumkin. Bu dinamik atributlar uchun juda foydali.

function Car() {
  const x = "myclass";
  return (
    <h1 className={x}>Hello World</h1>
  );
}

E’tibor bering, atribut qiymati qo‘shtirnoqqa olinmagan. Bu ifodalarni (JavaScript o‘zgaruvchilarini) atribut qiymati sifatida ishlatishda muhim. Agar qo‘shtirnoq ishlatsangiz, JSX uni JavaScript ifodasi emas, string literali sifatida qabul qiladi.

camelCase hodisasi atributlari

JSX-dagi hodisa atributlari camelCase-da yozilgan.

function Car() {
  const myfunc = () => {
    alert('Hello World');
  };
  return (
    <button onClick={myfunc}>Click me</button>
  );
}

Mantiqiy atributlar

Agar siz atribut uchun hech qanday qiymat o‘tkazmasangiz, JSX uni haqiqiy deb hisoblaydi. Noto‘g‘ri o‘tish uchun uni ifoda sifatida ko‘rsatish kerak.

<button onClick={myfunc} disabled>Click me</button>

<button onClick={myfunc} disabled={true}>Click me</button>

<button onClick={myfunc} disabled={false}>Click me</button>

Uslub atributi

JSX’dagi style atributi (HTML’dagidek) CSS stringni emas, faqat camelCase ko‘rinishidagi CSS xususiyat nomlariga ega JavaScript obyektini qabul qiladi.

function Car() {
  const mystyles = {
    color: "red",
    fontSize: "20px",
    backgroundColor: "lightyellow",
  };

  return (
    <>
      <h1 style={mystyles}>My car</h1>
    </>
  );
}

Yuqoridagi misolda ikkita narsaga e’tibor bering.

1. Uslublar obyektda saqlanadi.
2. Uslub xususiyatlari camelCase da yoziladi, masalan. font-size o‘rniga fontSize .

Bu HTML va JSX o‘rtasidagi muhim farq.

React CSS Styling bo‘limida CSS va uslublar haqida ko‘proq bilib olasiz.