JSX может отрисовывать любое JavaScript выражение, поэтому условная отрисовка — это просто обычный JS, используемый внутри { }.
jsx
() {
(
);
}
JSX может отрисовывать любое JavaScript выражение, поэтому условная отрисовка — это просто обычный JS, используемый внутри { }.
() {
(
);
}
cond && <X/> — отрисовывает <X/>, если cond истинно, иначе ничего. Отлично для "показать или скрыть".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).
Когда логика становится сложной, вычислите элемент перед return для читаемости:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Это сохраняет JSX плоским и логику решения понятной.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать