ReactDərs 8 / 15

Şərtli render

Məlumata görə görünüş seç

Şərtli render üçün adi if, erkən return, üçlü operator və && istifadə oluna bilər. Render etməmək istəyəndə null qaytar. Yüklənmə, xəta, boş nəticə və uğur bir-birindən ayrı vəziyyətlərdir.

export default function Products({ loading, error, items }) {
  if (loading) return <p role="status">Yüklənir…</p>;
  if (error) return <p role="alert">Məlumat alınmadı.</p>;
  if (items.length === 0) return <p>Məhsul tapılmadı.</p>;
  return <section>
    {items.length > 0 && <h2>{items.length} məhsul</h2>}
    <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
  </section>;
}

Nümunə

İfadənin qaytardığı dəyəri bil

0 && <List /> nəticəsi 0 olduğu üçün React ekranda sıfır göstərə bilər. Boolean şərt üçün count > 0 kimi açıq ifadə yaz. false, null və undefined görünən məzmun yaratmır; boş nəticənin istifadəçiyə izahı ayrıca lazım ola bilər.

Hook çağırışlarını şərtin və erkən return-un arxasına yerləşdirmə: komponent hər renderdə eyni hook sırasını saxlamalıdır. İç-içə mürəkkəb üçlü ifadələri ayrı komponent və ya funksiyaya böl. Pop-up və modal açıldıqda fokus və bağlama davranışını da düşün; yalnız görünüşü dəyişmək kifayət etmir.

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

İnterfeysin hansı hissəsinin görünəcəyini məlumatın vəziyyətinə görə seç. Erkən return, üçlü operator və && ifadəsini müqayisə et; yüklənmə, xəta və boş nəticəni ayrıca təsvir et.

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

Erkən return və null
Üçlü operator və &&
Yüklənmə, xəta və boş nəticə

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Boş və dolu görünüşü yoxla

Məhsul sayını dəyiş. Sıfır olanda ayrıca vəziyyəti gör.

Məhsul sayı 3

Hədəf: Məhsul sayını 0 et.

Canlı nəticə

Giriş3

Nəticə"3 məhsul"

Mənbə kodu

count > 0 ? '3 məhsul' : 'Məhsul tapılmadı'

Özün sına

Məhsul panelində loading, error, empty və success vəziyyətlərini göstər. Say sıfır olduqda && ifadəsinin təsadüfən 0 göstərmədiyini yoxla.

Nəticəni necə yoxlayım?

Dörd məlumat vəziyyəti ayrıca göstərilir; sıfır ədəd təsadüfən interfeysə çıxmır və hər render eyni hook sırasını saxlayır.

Gözlənilən nəticə

Seçimlə loading, error, empty, success vəziyyətlərinin hər biri ayrıca göstərilir.
Boş siyahıda Məhsul yoxdur yazılır; tək 0 rəqəmi çıxmı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.

Vəziyyətlər bir-birini istisna edir. Say 0 olduqda ayrıca şərt seçilir, ekrana təsadüfi 0 çıxmır.

App.jsx

import { useState } from 'react';
export default function App() {
  const [status, setStatus] = useState('loading');
  const products = status === 'success' ? [{ id: 1, title: 'Kitab' }] : [];
  let content;
  if (status === 'loading') content = <p>Yüklənir…</p>;
  else if (status === 'error') content = <p role="alert">Yüklənmədi.</p>;
  else if (products.length === 0) content = <p>Məhsul yoxdur.</p>;
  else content = <ul>{products.map(item => <li key={item.id}>{item.title}</li>)}</ul>;
  return <><label>Vəziyyət<select value={status} onChange={event => setStatus(event.target.value)}>
    {['loading', 'error', 'empty', 'success'].map(value => <option key={value}>{value}</option>)}
  </select></label>{content}</>;
}

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