JSX შეიძლება გაკეთდეს ნებისმიერი JavaScript expression, ამიტომ პირობითი რენდერირება უბრალოდ ჩვეულებრივი JS-ია { } შიგნით.
jsx
() {
(
);
}
JSX შეიძლება გაკეთდეს ნებისმიერი JavaScript expression, ამიტომ პირობითი რენდერირება უბრალოდ ჩვეულებრივი 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).
როდესაც ლოგიკა რთული ხდება, გამოთვალეთ element დაბრუნებამდე წაკითხვადობისთვის:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
ეს JSX-ს ბრტყელს და გადაწყვეტილების ლოგიკას ნაკლებ რთულს ხდის.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა