В React можно отображать разные компоненты в зависимости от state или props, используя то, что JSX не отображает значения false или undefined.
Используй оператор &&, когда хочешь отобразить компонент только если условие истинно:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address && <p>{address}</p>}
</div>
)
Этот подход работает по принципу ленивых вычислений—элемент JSX после && отображается только когда условие истинно.
Используй тернарный оператор (? :), когда нужно отобразить разный контент в зависимости от условия:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address ? <p>{address}</p> : <p>Address is not available</p>}
</div>
)
Это даёт альтернативу в духе if-else, позволяя отобразить запасной контент когда условие ложно.
&& для простой условной визуализации (отобразить или не отобразить)?: для двусторонних условий (отобразить это или то)false, undefined, null или пустые строкиЛогический оператор AND (&&) — это предпочтительный подход для отрисовки разного контента в зависимости от условия, так как он одинаково хорошо обрабатывает как truthy, так и falsy случаи.
Новый — ещё не проверен сообществом
Вы