JSX ఏదైనా JavaScript ఎక్సప్రెషన్ ను రెండర్ చేయగలదు, కాబట్టి షరతుబద్ధ రెండరింగ్ అనేది { } లోపల ఉపయోగించిన సాధారణ JS మాత్రమే.
jsx
() {
(
);
}
JSX ఏదైనా JavaScript ఎక్సప్రెషన్ ను రెండర్ చేయగలదు, కాబట్టి షరతుబద్ధ రెండరింగ్ అనేది { } లోపల ఉపయోగించిన సాధారణ JS మాత్రమే.
() {
(
);
}
cond && <X/> — cond నిజమైనప్పుడు <X/> ను రెండర్ చేయండి, లేకపోతే ఏమీ లేదు. "చూపించు లేదా దాచు" కోసం గొప్పది.cond ? <A/> : <B/> — రెండు శాఖల మధ్య ఎంచుకోండి.null ని రిటర్న్ చేసి ఏమీ రెండర్ చేయవద్దు.&& సంఖ్యలతో{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
ఇది జరుగుతుంది ఎందుకంటే 0 && x 0 గా మూల్యాంకనం చేయబడుతుంది, మరియు React సంఖ్య 0 ని రెండర్ చేస్తుంది (కానీ false/null/undefined కాదు).
లాజిక్ సంక్లిష్టమైనప్పుడు, పठనీయత కోసం రిటర్న్కు ముందు ఎలిమెంట్ ను గణించండి:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
ఇది JSX ను చదరపు ఆకారంలో ఉంచుతుంది మరియు నిర్ణయ తర్కం స్పష్టంగా ఉంటుంది.