جاوااسکریپت - مقادیر null با شرط OR داخل عبارت jsx کار نمیکنند

من یک تکه کد دارم که قرار است یک کامپوننت یا یک المان div جایگزین را رندر کند.

من این را داخل بلاک return یک کامپوننت دیگر قرار دادهام، اما نمیتوانم بفهمم چرا دیو جایگزین هرگز رندر نمیشود.

در اینجا قطعه کدی که در بلوک بازگشتی ذکر شده است آورده شده است:

{renderBannerSummary() || <div className={spacer} />}

renderBannerSummary یک تابع است که یک کامپوننت را رندر میکند که گاهی null برمیگرداند.

میتوانم ببینم که در مواقعی مقدار null واقعا از طریق کنسول بازگردانده میشود

من همچنین میتوانم ببینم که اگر عبارت OR منطقی را به طور کامل استخراج کنم و آن را ثبت کنم، هر زمان که renderBannerSummary مقدار null برگرداند، div ثبت میشود، همانطور که انتظار میرود:

پس، سوال من این است که چرا div فاصلهگذار هرگز در رابط کاربری نمایش داده نمیشود وقتی که renderBannerSummary مقدار null یا false برمیگرداند؟ در عوض، هیچ چیزی به طور کامل رندر نمیشود.

هر کمکی قابل تقدیر است، متشکرم

پاسخ شماره ۱

این باید برای شما کار کند:

{ renderBannerSummary() ? renderBannerSummary():<div className={spacer} /> }

این کد <div className={spacer}/> را نمایش میدهد اگر renderBannerSummary() null، undefined یا false باشد

پاسخ شماره ۲

ظاهراً عبارت OR شرطی من هرگز سمت راست را برنمیگرداند، زیرا آکولادهای {} در قسمت رندر یک کامپوننت همیشه کد را اجرا میکنند، به این معنی که فراخوانی متد من همیشه اجرا میشود و بنابراین همیشه درست خواهد بود - در داخل {}، کد من شرطی نبود