از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
React که یک کتابخانه محبوب جاوا اسکریپت برای ایجاد رابط کاربری است، در واقع یکی از پروژه های بهتر از نظر هشدارهای مفید است. یکی از این هشدارهایی که توسعه دهندگان اغلب با آن مواجه می شوند این است <div> cannot appear as a descendant of <p>.
در این بایت روش حل این مشکل را نشان خواهیم داد.
پس موضوع چیست؟
این <div> cannot appear as a descendant of <p> هشدار در React در واقع ناشی از نقض مشخصات HTML5 است. با توجه به مشخصات، <p> برچسب فقط می تواند حاوی “محتوای عبارت” باشد که شامل متن و عناصر درون خطی مانند <span>. با این حال، الف <div> یک عنصر در سطح بلوک است و قرار دادن یک عنصر سطح بلوک در داخل یک پاراگراف توسط مشخصات مجاز نیست.
<p>
This is a paragraph with a <div>div inside it</div>.
</p>
در کد بالا، <div> درون <p> برچسب باعث این مشکل می شود.
عنصر مشکل ساز را شناسایی کنید
برای رفع اخطار، ابتدا باید عنصر مشکل ساز را پیدا کنید. این را معمولاً می توان با بررسی کردن انجام داد console در ابزارهای توسعه دهنده مرورگر شما. هشدارهای React معمولاً ردیابی پشته ای را ارائه می دهند که می تواند به شما در یافتن منبع مشکل کمک کند.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
in div (at App.js:5)
in p (at App.js:4)
in div (at App.js:3)
in App (at src/index.js:7)
در این مثال، stack trace نشان می‌دهد که مشکل در قسمت است App جزء، به طور خاص در خط 5 اینچ App.js.
رفع اخطار
هنگامی که عنصر مشکل ساز را شناسایی کردید، می توانید با جایگزین کردن آن هشدار را برطرف کنید <div> با یک عنصر درون خطی که در داخل a مجاز است <p>، مثل یک <span>، یا با بازسازی HTML خود به گونه ای که <div> دیگر از نوادگان a نیست <p>.
<p>
This is a paragraph with a <span>span instead of a div</span> 👍.
</p>
یا:
<div>
<p>This is a paragraph.</p>
<div>This is a div that's no longer inside the paragraph!</div>
</div>
هر دوی این راه‌حل‌ها هشدار را برطرف می‌کنند، زیرا ما اکنون با مشخصات HTML5 مطابقت داریم.
نتیجه
به طور خلاصه، <div> can't appear as a descendant of <p> هشدار در React به دلیل مشخصات HTML5 برای <p> عنصری که فقط می تواند حاوی محتوای عبارت باشد. با درک مدل محتوای HTML5 و تنظیم کد خود بر اساس آن، می توانید به راحتی این هشدار را برطرف کنید. در حالی که این هشدارها ممکن است فقط آزاردهنده به نظر برسند – آنها برای کمک به شما در نوشتن کدهای بهتر، تمیزتر و سازگارتر وجود دارند.
منتشر شده در 1403-01-02 23:26:06
