Вопрос проверяет знание о том, как в React можно динамически отображать разные компоненты или элементы в зависимости от условий, что является важной частью построения интерактивных интерфейсов.
Условный рендеринг — это способ отображения элементов в React на основе определенных условий. Это работает так же, как условные операторы в JavaScript. Например, вы можете показать один компонент, если условие истинно, и другой, если условие ложно.
Условный рендеринг в React позволяет динамически изменять, какие элементы или компоненты отображаются в интерфейсе в зависимости от текущего состояния или пропсов. Самый простой способ реализовать это — использовать оператор if или тернарный оператор. Например:
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign up.</h1>;
}
}Тернарный оператор может сделать код более компактным:
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}Также можно использовать логическое && для рендеринга компонента, если условие истинно:
function ShowWarning({ showWarning }) {
return (
<div>
{showWarning && <p>Warning: Something went wrong!</p>}
</div>
);
}Условный рендеринг — это основной способ создания динамичных пользовательских интерфейсов, где разные компоненты или элементы появляются в зависимости от состояния приложения.