Conditional Rendering یا رندر شرطی و مشروط در ری اکت چیست؟

رندر مشروط (Conditional Rendering) یک مفهوم مهم در React است که به توانایی نمایش یا عدم نمایش یک بخش از رابط کاربری به ازای یک شرط خاص اشاره دارد. این کار معمولاً با استفاده از دستورات شرطی مانند `if` یا `ternary operator` انجام می‌شود. در زیر چند رویکرد برای رندر مشروط در React آورده شده است:

ابتدا توضیح سریع رندر شرطی در ری اکت به همراه مثال

1. استفاده از دستور `if`:

```jsx
import React from 'react';

const ConditionalComponent = ({ condition }) => {
  if (condition) {
    return <p>This is rendered when the condition is true.</p>;
  } else {
    return <p>This is rendered when the condition is false.</p>;
  }
}

export default ConditionalComponent;
```

2. استفاده از `ternary operator`:

استفاده از ternary operatorیک روش کوتاه‌تر برای رندر شرطی در React است. این رویکرد از یک عبارت شرطی به نام ternary operator (یا عملگر سه گانه - سه تایی) استفاده می‌کند که یک عبارت شرطی را ارزیابی کرده و بسته به نتیجه آن یکی از دو انتخاب را انجام می‌دهد.

در مثال زیر، یک کامپوننت ساده به نام ConditionalComponent نوشته شده است. این کامپوننت یک ویژگی به نام condition دریافت می‌کند و بسته به مقدار این ویژگی، یک متن مشخص را رندر می‌کند:

```jsx
import React from 'react';

const ConditionalComponent = ({ condition }) => (

  condition ? (
    <p>This is rendered when the condition is true.</p>
  ) : (
    <p>This is rendered when the condition is false.</p>
  )
);

export default ConditionalComponent;
```

در اینجا:

 condition ? (/* true case */) : (/* false case */)

نشان‌دهنده ternary operator است. اگر condition درست (true) باشد، بخشی که درون پرانتز اول قرار دارد اجرا می‌شود (در اینجا یک تگ p با متن "This is rendered when the condition is true")، در غیر این صورت بخشی که درون پرانتز دوم قرار دارد اجرا می‌شود (یک تگ p با متن "This is rendered when the condition is false").

این رویکرد خوانایی کد را افزایش می‌دهد و در صورتی که شرط ساده باشد، اغلب ترجیح داده می‌شود.

3. استفاده از متغیرها:

این کد یک کامپوننت ری اکت به نام `ConditionalComponent` ایجاد می‌کند که بر اساس یک شرط ورودی به نام `condition`، یک متغیر به نام `content` را تعریف می‌کند. سپس از این متغیر برای تعیین اینکه کدام بخش از JSX باید رندر شود، استفاده می‌کند.

در اینجا متغیر `content` شامل یک عبارت JSX است که اگر شرط `condition` صحیح باشد، یک پاراگراف متن "This is rendered when the condition is true" را نمایش می‌دهد؛ در غیر این صورت، یک پاراگراف متن "This is rendered when the condition is false" را نمایش می‌دهد.

سپس در قسمت `return`، کد از متغیر `content` برای رندر کردن محتوا درون یک `<div>` استفاده می‌کند. به این ترتیب، اگر `condition` صحیح باشد، پاراگراف مربوط به حالت صحیح درون یک `<div>` رندر می‌شود و اگر `condition` غیرصحیح باشد، پاراگراف مربوط به حالت غیرصحیح درون یک `<div>` رندر می‌شود.

از این کامپوننت می‌توان در دیگر کامپوننت‌ها یا صفحات React استفاده کرد تا به صورت شرطی، بسته به شرایط مختلف، محتواها را نمایش دهد.

```jsx
import React from 'react';

const ConditionalComponent = ({ condition }) => {
  const content = condition
    ? <p>This is rendered when the condition is true.</p>
    : <p>This is rendered when the condition is false.</p>;

  return <div>{content}</div>;
}

export default ConditionalComponent;
```

4. استفاده از `&&`:

مورد چهارم که با استفاده از && انجام می‌شود، یک روش کمی خلاصه‌تر از ternary operator برای رندر شرطی در React است. این رویکرد از && به عنوان یک عامل مدارکوتاه (short-circuit) استفاده می‌کند.

در مثال زیر، یک کامپوننت ساده به نام ConditionalComponent نوشته شده است. این کامپوننت یک ویژگی به نام condition دریافت می‌کند و اگر condition درست (true) باشد، یک متن مشخص را رندر می‌کند:

```jsx
import React from 'react';

const ConditionalComponent = ({ condition }) => (
  <div>
    {condition && <p>This is rendered when the condition is true.</p>}
  </div>
);

export default ConditionalComponent;
```

در اینجا:

{condition && <p>This is rendered when the condition is true.</p>}

نشان‌دهنده استفاده از && به عنوان یک عامل مدارکوتاه است. اگر condition درست (true) باشد، عبارت سمت راست عملگر && اجرا می‌شود (در اینجا یک تگ p با متن "This is rendered when the condition is true")، در غیر این صورت، عبارت سمت راست اجرا نمی‌شود و چیزی رندر نمی‌شود.

استفاده از && به این دلیل کارآمد است که اگر conditionیا شرط برقرار نباشد یعنی false باشد، اجرا متوقف شده و مقدار بعد از && برگردانده نمی‌شود (مدارکوتاه)، بنابراین می‌توان از این خاصیت برای رندر مشروط استفاده کرد.

در همه موارد بالا، محتوای قابل نمایش بر اساس شرط ارائه شده به کامپوننت تصمیم‌گیری شده و به عنوان بخشی از رابط کاربری رندر می‌شود یا نمی‌شود، بسته به این که شرط درست باشد یا خیر. این ساختارها به توسعه‌دهندگان امکان اعمال منطق مختلف در قسمت‌های مختلفی از برنامه را می‌دهند.

رندر مشروط در ری اکت چیست؟

کامپوننتهای شما معمولاً بسته به شرایط مختلف نیاز به نمایش چیزهای مختلفی دارند. در React، می‌توانید JSX را با استفاده از دستورات جاوا اسکریپت مانند دستورات if، && و عملگرهای ? : به صورت مشروط رندر کنید.

یاد خواهید گرفت
نحوه برگرداندن JSX های مختلف بسته به شرایط
نحوه گنجاندن یا حذف مشروط یک قطعه از JSX
میانبرهای نحوی مشروط معمولی که در پایگاه های کد React با آنها مواجه خواهید شد

مشروط برگرداندن JSX

فرض کنید یک کامپوننت PackingList دارید که چندین Item را رندر می کند، که می تواند به عنوان بسته بندی شده یا نشده علامت گذاری شود:

function Item({ name, isPacked }) {
  return <li className=&quotitem&quot>{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name=&quotSpace suit&quot 
        />
        <Item 
          isPacked={true} 
          name=&quotHelmet with a golden leaf&quot 
        />
        <Item 
          isPacked={false} 
          name=&quotPhoto of Tam&quot 
        />
      </ul>
    </section>
  );
}

توجه داشته باشید که در برخی از Itemهای کامپوننت، prop پراپ isPackedبه trueتنظیم شده است به جای اینکه falseباشد. هدف این است که یک علامت تیک (✔) به آیتمهای بسته بندی شده اضافه کنید یعنی اگر پراپ آیتمی برابرisPacked={true}باشد پس باید آن آیتم با این مقدار پراپ تیک بخورد.

if (isPacked) {
return <li className=&quotitem&quot>{name} ✔</li>;
}
return <li className=&quotitem&quot>{name}</li>;

اگر پراپ isPacked برابر true است ، این کد ساختار JSX متفاوتی را برمی گرداند. با این تغییر، برخی از موارد در انتها علامت چک می گیرند:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className=&quotitem&quot>{name} ✔</li>;
  }
  return <li className=&quotitem&quot>{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name=&quotSpace suit&quot 
        />
        <Item 
          isPacked={true} 
          name=&quotHelmet with a golden leaf&quot 
        />
        <Item 
          isPacked={false} 
          name=&quotPhoto of Tam&quot 
        />
      </ul>
    </section>
  );
}

در کدسندباکس میتوانید این کد را ویرایش کنید و تغییرات را پیگیری کنید:

https://codesandbox.io/s/optimistic-meitner-ccxmw8?file=/App.js

تفسیر کد بالا:
این کد دو کامپوننت React تعریف می‌کند: `Item` و `PackingList`.

1.کامپوننت `Item` :

کامپوننت `Item` یک کامپوننت تابعی است که با دو پارامتر `name` و `isPacked` فراخوانی می‌شود. این کامپوننت یک شرط اجرا می‌کند. اگر `isPacked` برابر با `true` باشد، یک `<li>` (آیتم لیست) با کلاس "item" و محتوای `{name} ✔` ایجاد می‌کند (که `✔` نمایانگر این است که آیتم بسته بندی شده است)؛ در غیر این صورت، یک `<li>` با کلاس "item" و محتوای `{name}` ایجاد می‌شود. در هر دو حالت، یک `<li>` به عنوان خروجی تابع باز می‌گردد.

2. کامپوننت `PackingList`:

کامپوننت `PackingList` یک کامپوننت تابعی است که یک `<section>` شامل یک `<h1>` (عنوان) و یک `<ul>` (لیست نامرتب) ایجاد می‌کند.

درون `<ul>`، سه نمونه از کامپوننت `Item` با ویژگی‌های مختلف فراخوانی می‌شوند. دو آیتم اول (`Space suit` و `Helmet with a golden leaf`) با `isPacked` برابر با `true` و آیتم سوم (`Photo of Tam`) با `isPacked` برابر با `false` فراخوانی می‌شوند.

به این ترتیب، `PackingList` یک لیست ایجاد می‌کند که هر آیتم آن با استفاده از کامپوننت `Item` ، شرطی بر اساس ویژگی `isPacked` را اجرا می‌کند و متن مناسب را نمایش می‌دهد.

اگر میخواهید کد بالا را از نزدیک ببینید و تغییر دهید اینجا در کدسندباکس ببینید.

https://codesandbox.io/s/optimistic-meitner-ccxmw8?file=/App.js

توجه کنید که چگونه با جاوا اسکریپت و عبارات if و return منطق انشعابی ایجاد می کنید. در React، جریان کنترل (مانند شرطی ها) توسط جاوا اسکریپت مدیریت می شود.