آشنایی با Conditional Rendering | رندر شرطی در ریکت

Conditional Rendering ریکت در واقع همون دستورهای شرطی هستند که ما معمولا در جاوا اسکریپت استفاده می کردیم. در این پست قصد دارم دستورات رایجشو در ریکت برای شما معرفی کنم و توضیح بدم.

رندر شرطی به چه کار میاد؟

حالا شاید از خودت بپرسی رندر شرطی به چه کار میاد؟ گاهی وقت ها کامپوننت های شما دلشون میخواد به یک شرط وابسته باشن و در شرایط مختلف چیزهای متفاوتی نشون بدن.

در ریکت شما میتونید از سینتکس هایی مثل if، && و اپرارتوهای مانند ؟ : استفاده کنید و این ساختار رو پیاده کنید.

Conditionally returning jsx

در این روش ما از ترکیب props و if else استفاده می کنیم، به مثال زیر رو توجه کنید که در ادامه توضیحات بیشتری بدم.

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

در این قسمت اگر مقدار isPacek کامپوننت آیتم true بود. علامت ✔ در کنار نام اضافه میشه در غیر اینصورت فقط نام نمایش داده میشه.

Conditional Rendering با اپراتور : ؟

شما تا حدودی با این سینتکس در جاوا اسکریپت آشنایی دارید. اینجا به راحتی میتونید به شکل زیر استفاده کنید.

بجای if else  :

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

میتونید به این شکل از اپراتور : ؟ استفاده کنید.

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

مثل مثال قبل اگر ispacked مقدار true داشت✔+name ، در غیر اینصورت فقط name رندر میشه.

 رندر شرطی با عملگر منطقی &&

یکی از رایج ترین شیوه استفاده Conditional Rendering در ریکت به عملگر منطقی AND برمیگرده، اگر شرط اول مقدار true داشت، کامپوننت یا کد بعد از عملگر && اجرا میشه.

{isset && <Component>}

 مثال بیشتر:

unction Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

روش های متفاوت دیگه هم برای رندر شرطی مثل استفاده از متغییرها و .. وجود داشت اما از اونجایی که شباهت زیادی به روش های بالا داشت از معرفیشون پرهیز کردم.

حالا اگه نکته ی مدنظرتون بود ممنون میشم تو فسمت نظرات بیان کنید.