Skip to main content

rendering-conditional-render

Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.

معلومات المصدر

المستودع
TheOrcDev/8bitcn-ui
آخر نشاط في المصدر
١٦ يناير ٢٠٢٦ في ٠٩:٠٩
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٢٬٠٧٠
التفرعات
١٢٠

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
rendering-conditional-render
description
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
## Use Explicit Conditional Rendering Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render. **Incorrect (renders "0" when count is 0):** ```tsx function Badge({ count }: { count: number }) { return ( <div> {count && <span className="badge">{count}</span>} </div> ) } // When count = 0, renders: <div>0</div> // When count = 5, renders: <div><span class="badge">5</span></div> ``` **Correct (renders nothing when count is 0):** ```tsx function Badge({ count }: { count: number }) { return ( <div> {count > 0 ? <span className="badge">{count}</span> : null} </div> ) } // When count = 0, renders: <div></div> // When count = 5, renders: <div><span class="badge">5</span></div> ```
عرض على GitHub