ReactDərs 3 / 15

Komponentin xüsusiyyətləri

Komponentin girişi

Props valideynin komponentə verdiyi məlumatdır. Sətir atributla, ədəd, boolean, obyekt və funksiya JavaScript ifadəsi ilə ötürülür. Props-u oxu, amma birbaşa dəyişmə; yeni dəyərin sahibi valideyndirsə yeniləməni ondan istə.

function ProductCard({ title, price, available = true, children }) {
  return <article>
    <h2>{title}</h2>
    <p>{price} AZN</p>
    <p>{available ? 'Mövcuddur' : 'Bitib'}</p>
    {children}
  </article>;
}
export default function App() {
  return <main>
    <ProductCard title="Çanta" price={25}><small>Yeni model</small></ProductCard>
    <ProductCard title="Dəftər" price={4} available={false} />
  </main>;
}

Nümunə

Destrukturizasiya və birtərəfli axın

{title, price} props obyektinin destrukturizasiyasıdır. Alternativ olaraq funksiyada props.title oxuya bilərsən. Sinifdə eyni məlumat this.props.title şəklindədir. children açılış və bağlanış komponent teqləri arasındakı məzmundur.

Məlumat valideyndən övlada axır. Övlad hadisə zamanı callback çağıra, valideyn isə öz state-ni dəyişə bilər. Eyni komponenti bir neçə dəfə istifadə etmək hər nüsxədə kodu dəyişmək ehtiyacını aradan qaldırır. Komponentə ötürülmüş key React-in kimlik məlumatıdır; adi prop kimi oxunmur, ayrıca id lazım ola bilər.

Əlavə qeydlər və mənbələr

Props valideynin komponentə verdiyi giriş məlumatıdır. Destrukturizasiya ilə oxu, JSX-də göstər və birbaşa dəyişmə; eyni komponent müxtəlif props ilə fərqli məzmun göstərsin.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

Props və this.props
Destrukturizasiya
Təkrar istifadə və birtərəfli məlumat axını

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Komponentə yeni prop ver

Valideyndən gələn başlıq dəyərini dəyiş.

Element

title prop-u

Hədəf: title prop-unu Yeni məhsul et.

Çanta

<h2>Çanta</h2>

Özün sına

ProductCard-a title, price və available props ötür. Eyni komponentlə mövcud və bitmiş məhsulları göstər.

Nəticəni necə yoxlayım?

Bir kart komponenti fərqli props ilə müxtəlif məhsulları göstərir və heç bir prop birbaşa dəyişdirilmir.

Gözlənilən nəticə

Kitab 12 AZN və Mövcuddur; Çanta 25 AZN və Bitib göstərilir.
Bir komponent fərqli props ilə iki görünüş yaradır.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Props komponentin girişidir və birbaşa dəyişdirilmir. available yalnız görünən mövcudluq mətnini müəyyən edir.

App.jsx

function ProductCard({ title, price, available }) {
  return <article><h2>{title}</h2><p>{price} AZN</p><p>{available ? 'Mövcuddur' : 'Bitib'}</p></article>;
}
export default function App() {
  return <main><ProductCard title="Kitab" price={12} available={true} /><ProductCard title="Çanta" price={25} available={false} /></main>;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.