Conditional Rendering in React JS

Hordhac

Mid ka mid ah sifooyinka ugu awoodda badan ee React waa conditional rendering, taas oo kuu oggolaanaysa inaad qaybaha (components) ku sharraxdo xaalado kala duwan iyadoo ku xiran xogta ama falka isticmaaleha. Maqaalkan waxaan ku eegi doonaa sida loo sameeyo conditional rendering, waxaana sharxi doonaa siyaabo kala duwan oo loo fuliyo xaaladaha (conditions) gudaha React.

Waa Maxay Conditional Rendering?

 Conditional Rendering in React JS

Conditional rendering waa marka aad ku sharraxdo qaybaha (components) xaalado gaar ah. Tani waa sida markaad rabto inaad qayb ama walax ka muuqato interface-ka isticmaalaha iyadoo ku saleysan xog ama fal gaar ah. Si ka duwan HTML-ka caadiga ah, React wuxuu kuu oggolaanayaa inaad isticmaasho xaalado iyo shuruudo si aad u go'aamiso waxa la muujinayo.

Hababka Loogu Fuliyo Conditional Rendering

1. Isticmaalka If-else Habka ugu caansan ee loo fuliyo conditional rendering waa adigoo isticmaalaaya if-else. Waxaad ku sharraxi kartaa qaybaha iyadoo lagu saleynayo shuruudo gaar ah.

Tusaale ahaan:

javascript

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

Halkan, haddii isticmaalaha uu soo galay (logged in), farriin soo dhaweyn ah ayaa la muujinayaa. Haddii uusan soo galin, farriin casuumaad ayaa la bixinayaa.

2. Isticmaalka Ternary Operator Hab kale oo kooban oo aad ku fulin karto conditional rendering waa adoo isticmaalaya ternary operator. Ternary operator waa hab gaaban oo loo adeegsado if-else.

Tusaale:

javascript

function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}

Xaaladdan, haddii isLoggedIn uu sax yahay (true), farriinta "Welcome back!" ayaa la soo bandhigi doonaa; haddii uu khaldan yahay (false), farriinta "Please sign up." ayaa la soo bandhigi doonaa.

3. Isticmaalka Logical && Operator Waa hab kale oo fudud oo aad ku sharraxin karto qaybaha iyadoo shuruudaha buuxinaya lagu fulinayo && operator. Haddii xaaladdu run tahay, qaybta waa la sharraxi doonaa, haddii kale lama sharraxi doono.

Tusaale:

javascript

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

Halkan, haddii fariimo aan la akhrin ay jiraan, farriin ayaa soo muuqanaysa, haddii kalena farriintaas lama soo bandhigi doono.

4. Isticmaalka Switch Statement Waxaa sidoo kale suuragal ah inaad isticmaasho switch statement haddii aad leedahay xaalado badan oo kala duwan oo aad u baahan tahay inaad maarayso. Switch wuxuu kuu oggolaanayaa inaad si fiican u maamuli karto shuruudo kala duwan.

Tusaale:

javascript

function StatusMessage(props) {
  switch (props.status) {
    case 'loading':
      return <h1>Loading...</h1>;
    case 'success':
      return <h1>Data loaded successfully!</h1>;
    case 'error':
      return <h1>Error loading data.</h1>;
    default:
      return <h1>Unknown status.</h1>;
  }
}

Xaaladdan, waxaa lagu sharraxayaa fariin iyadoo ku xiran xaaladda xogta — haddii xogta ay ku jirto loading, guulaysatay, ama qalad soo wajahday.

Isticmaalka Conditional Rendering ee Qaybo Isku Dhex Jira

Waqtiyada qaarkood, waxaa laga yaabaa inaad rabto inaad isticmaasho conditional rendering gudaha qaybaha isku dhex jira. Waxaad ku dari kartaa qaybo kala duwan oo ku saleysan xaaladaha aad dejisay.

Tusaale:

javascript

function Dashboard(props) {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      <Header />
      {isLoggedIn ? <UserDashboard /> : <GuestDashboard />}
      <Footer />
    </div>
  );
}

Halkan, marka isticmaalaha soo galo, UserDashboard ayaa la soo bandhigi doonaa, haddii uusan soo galin, waxaa la soo bandhigi doonaa GuestDashboard. Labadan qayb (components) ayaa si gooni ah u noqon kara qaybo sharraxan iyadoo ku xiran isticmaalaha.

Gunaanad

Conditional rendering waa mid ka mid ah sifooyinka ugu waxtarka badan ee React JS. Waxay kuu oggolaanaysaa inaad ku sharraxdo qaybaha boggaaga iyadoo lagu saleynayo xog ama shuruudo. Hababka kala duwan sida if-else, ternary operator, iyo logical && operator waxay kuu fududeynayaan inaad ka shaqeyso xaaladaha kala duwan ee sharraxaadda qaybaha. Ku shaqeynta conditional rendering waxay si weyn uga caawin kartaa in interface-ka isticmaaluhu noqdo mid dabacsan oo waafaqsan ficillada isticmaaleha.