عناصر JSX مجاور باید در یک تگ پوششی قرار بگیرن (React JS)
Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
من دارم با React کار می‌کنم و به یه خطایی برخوردم که خیلی اذیتم کرده. وقتی که دارم یه کامپوننت ساده رو رندر می‌کنم، یه ارور میاد که میگه "Adjacent JSX elements must be wrapped in an enclosing tag". منظورش چیه و چطور می‌تونم این مشکل رو حل کنم؟ می‌تونید راهنمایی کنید؟
این خطایی که باهاش مواجه شدی به این معنیه که وقتی داری چندین عنصر JSX رو کنار هم می‌نویسی، باید اون‌ها رو داخل یه تگ واحد (معمولاً یک <div> یا یه تگ <> </> که بهش Fragment هم می‌گن) بپیچی. توی JSX نمی‌تونی دو یا چند عنصر رو بدون تگ والد توی یه فایل برگردونی.
به عنوان مثال، فرض کن که این کد باعث خطا شده:
return ( <h1>Hello, world!</h1> <p>This is a paragraph.</p> );
چون که <h1> و <p> به صورت مجاور قرار گرفتن و داخل یه تگ پوششی نیستن، با اون خطا مواجه می‌شی.
برای حل این مشکل، کافیه که عناصر JSX رو داخل یه تگ والد قرار بدی. مثلاً این‌طور:
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
);
یا اگر نمی‌خوای از تگ اضافی استفاده کنی، می‌تونی از Fragment استفاده کنی:
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
);
این‌جوری می‌تونی هر تعداد عنصر JSX که بخوای رو بدون مشکل برگردونی و دیگه اون خطا رو نخواهی دید. Fragment ها تگ‌های اضافه به HTML نهایی اضافه نمی‌کنن، پس می‌تونن گزینه خوبی باشن.