چطور به صورت شرطی به کامپوننت‌های React ویژگی (attribute) اضافه کنم؟

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

فرض کن می‌خوای ویژگی disabled رو فقط وقتی به یک دکمه اضافه کنی که متغیر isDisabled برابر با true باشه. اینجوری می‌تونی کد رو بنویسی:

<button disabled={isDisabled ? true : undefined}>
  Click me
</button>

در این مثال، اگر isDisabled برابر با true باشه، ویژگی disabled به دکمه اضافه میشه. در غیر این صورت، ویژگی disabled به دکمه اضافه نمیشه.

همچنین می‌تونی از spread operator هم استفاده کنی تا اگر شرط برقرار بود، مجموعه‌ای از ویژگی‌ها رو به کامپوننت اضافه کنی:

const props = isDisabled ? { disabled: true } : {};
  return (
    <button {...props}>
        Click me
    </button>
);

در این کد، اگر isDisabled برابر با true باشه، ویژگی disabled به دکمه اضافه میشه و اگر نباشه، دکمه بدون اون ویژگی رندر میشه.

این روش‌ها بسیار کارآمد و خوانا هستن و بهت این امکان رو میدن که کد تمیزتر و قابل نگهداری‌تری داشته باشی.