JSX ਕਿਸੇ ਵੀ JavaScript ਸਮੀਕਰਨ ਨੂੰ ਰੈਂਡਰ ਕਰ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਸ਼ਰਤ ਦੇ ਨਾਲ ਰੈਂਡਰਿੰਗ { } ਦੇ ਅੰਦਰ ਆਮ JS ਦੀ ਵਰਤੋਂ ਹੈ।
jsx
() {
(
);
}
JSX ਕਿਸੇ ਵੀ JavaScript ਸਮੀਕਰਨ ਨੂੰ ਰੈਂਡਰ ਕਰ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਸ਼ਰਤ ਦੇ ਨਾਲ ਰੈਂਡਰਿੰਗ { } ਦੇ ਅੰਦਰ ਆਮ JS ਦੀ ਵਰਤੋਂ ਹੈ।
() {
(
);
}
cond && <X/> — <X/> ਨੂੰ ਰੈਂਡਰ ਕਰੋ ਜਦੋਂ cond truthy ਹਾਂ, ਨਹੀਂ ਤਾਂ ਕੁਝ ਨਹੀਂ। "ਦਿਖਾਓ ਜਾਂ ਲੁਕਾਓ" ਲਈ ਵਧੀਆ।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 ਨੂੰ ਸਮਤਲ ਅਤੇ ਫੈਸਲੇ ਦੇ ਤਰਕ ਨੂੰ ਸਪਸ਼ਟ ਰੱਖਦਾ ਹੈ।