Ինչպես նկարել կոմպոնենտը պայմանից կախված?

Ընտրում են հետևյալ մեթոդները՝

• Շրջանցիկ ռենդերինգ՝ ternary օպերատոր կամ if օգտագործելով: Ամենահեշտ միջոցը:

  // Օրինակ React-ում ternary օպերատորով
  function MyComponent({ isLoggedIn }) {
    return (
      <div>
        {isLoggedIn ? (
          <p>Բարև, օգտվող!</p>
        ) : (
          <buttonՄուտք գործել</button>
        )}
      </div>
    );
  }
  

  // Օրինակ `if`-ով ֆունկցիոնալ կոմպոնենտում
  function AnotherComponent({ isLoading }) {
    if (isLoading) {
      return <p>Բեռնվում է...</p>;
    }
    return <h1>Տվյալները բեռնված են!</h1>;
  }
  

• Հավաքական AND (&&): Հարմար է, երբ անհրաժեշտ է ցուցադրել կոմպոնենտ միայն ճշմարիտ պայմանով:

  // Օրինակ 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>
    );
  }
  

Ընտրությունը կախված է պայմանի բարդությունից և կոմպոնենտի կառուցվածքից։ Պարզ պայմանների համար հաճախ բավարար է ternary կամ &&։ Ավելի բարդ սցենարների և կոդի լավ կազմակերպման համար խորհուրդ է տրվում օգտագործել առանձին ֆունկցիաներ կամ կոմպոնենտներ։ CSS display / visibility-ը պետք է օգտագործել զգուշությամբ, եթե անհրաժեշտ չէ ամբողջությամբ հեռացնել տարրն DOM-ից։