React Fragments و طراحی کامپوننت‌های قابل استفاده مجدد

مقدمه

در React، هر کامپوننت باید فقط یک عنصر ریشه‌ای در JSX بازگرداند. برای مثال، در کامپوننت Search مجبور بودیم از یک <div> استفاده کنیم تا بتوانیم <label> و <input> را کنار هم قرار دهیم.

استفاده از Fragment

برای جلوگیری از اضافه شدن عناصر اضافی به DOM، می‌توان از React.Fragment یا نسخهٔ خلاصه‌شدهٔ آن <>...</> استفاده کرد:

const Search = ({ search, onSearch }) => (
  <>
    Search: 
    
  
);

Fragment باعث می‌شود عناصر کنار هم قرار بگیرند بدون اینکه عنصر اضافی به DOM اضافه شود.

بازطراحی کامپوننت Search

کامپوننت Search فقط شامل یک label و input است، اما به‌طور خاص برای جستجو طراحی شده. برای افزایش قابلیت استفاده مجدد، آن را به InputWithLabel تغییر می‌دهیم:

const InputWithLabel = ({ id, label, value, onInputChange }) => (
  <>
    {label}
     
    
  
);

افزایش انعطاف‌پذیری با type

برای پشتیبانی از انواع مختلف ورودی مانند number یا tel، ویژگی type را نیز به پراپس‌ها اضافه می‌کنیم:

const InputWithLabel = ({
  id,
  label,
  value,
  type = 'text',
  onInputChange,
}) => (
  <>
    {label}
     
    
  
);

اگر type ارسال نشود، مقدار پیش‌فرض 'text' استفاده می‌شود.

جمع‌بندی

استفاده از Fragment در React به ما اجازه می‌دهد چند عنصر را بدون افزودن عنصر اضافی در DOM بازگردانیم. همچنین با بازطراحی کامپوننت‌های خاص به کامپوننت‌های عمومی مانند InputWithLabel، می‌توانیم قابلیت استفاده مجدد، خوانایی و نگهداری کد را افزایش دهیم. این تکنیک‌ها پایه‌ای برای توسعه حرفه‌ای و مقیاس‌پذیر در React هستند.