როგორ გამოვხატოთ კომპონენტი პირობაზე დაყრდნობით?

Үздіксіз қолданылатын әдістер мыналар:

• Тернарлық оператор немесе if көмегімен шартты рендеринг: Ең қарапайым тәсіл.

  // React-те тернарлық оператор мысалы
  function MyComponent({ isLoggedIn }) {
    return (
      <div>
        {isLoggedIn ? (
          <p>Сәлем, қолданушы!</p>
        ) : (
          <button>Кіру</button>
        )}
      </div>
    );
  }
  

  // Функционалды компонентте `if` қолдану мысалы
  function AnotherComponent({ isLoading }) {
    if (isLoading) {
      return <p>Жүктелуде...</p>;
    }
    return <h1>Деректер жүктелді!</h1>;
  }
  

• Логикалық И (&&): Шарт шын болғанда ғана компонентті көрсету үшін ыңғайлы.

  // React-те && қолдану мысалы
  function MessagesCount({ count }) {
    return (
      <div>
        {count > 0 && <p>Сізде {count} жаңа хабарлама бар.</p>}
      </div>
    );
  }
  

• Функциялар мен ішкі компоненттер қолдану: Бұл логиканы бөлек функцияларға немесе компоненттерге шығарып, оқылуын жақсарту және қайта пайдалану үшін.

  // React-те функциямен мысал
  function renderContent(userRole) {
    if (userRole === 'admin') {
      return <AdminPanel />;
    } else if (userRole === 'user') {
      return <UserProfile />;
    }
    return <LoginPage />;
  }
  
  function App({ userRole }) {
    return (
      <div>
        {renderContent(userRole)}
      </div>
    );
  }
  

• Массивтер мен map әдісі: Мәліметтер негізінде компоненттер тізімін көрсету.

  // React-те `map` қолдану мысалы
  function ItemsList({ items }) {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
  

• CSS display / visibility: Элементті жасыру немесе көрсету, бірақ компонент әлі де рендерленеді. Бұл қарапайым жағдайлар үшін қолайлы, егер жағдай DOM құрылымына әсер етпесе.

  /* CSS мысалы */
  .hidden {
    display: none;
  }
  

  // React-те CSS класты қолдану мысалы
  function ToggleableContent({ isVisible }) {
    return (
      <div className={isVisible ? '' : 'hidden'}>
        <p>Бұл мазмұн жасырынуда.</p>
      </div>
    );
  }
  

Әдіс таңдау шарттың күрделілігіне және компоненттің құрылымына байланысты. Қарапайым шарттар үшін көбінесе тернарлық оператор немесе && жеткілікті. Күрделірек сценарийлер мен жақсы ұйымдастыру үшін бөлек функциялар немесе компоненттер қолдану ұсынылады. CSS display / visibility қолданғанда абай болу керек, егер элементті толықтай DOM-дан алып тастау қажет болмаса.