Что такое условный рендеринг в React?

Question

Условный рендеринг — это способ отображения элементов в React на основе определенных условий. Это работает так же, как условные операторы в JavaScript. Например, вы можете показать один компонент, если условие истинно, и другой, если условие ложно.

YeaHub · Accepted Answer

Условный рендеринг в React позволяет динамически изменять, какие элементы или компоненты отображаются в интерфейсе в зависимости от текущего состояния или пропсов. Самый простой способ реализовать это — использовать оператор if или тернарный оператор. Например:function Greeting({ isLoggedIn }) { if (isLoggedIn) { return

Welcome back!

; } else { return

Please sign up.

; } }Тернарный оператор может сделать код более компактным:function Greeting({ isLoggedIn }) { return isLoggedIn ?

Welcome back!

:

Please sign up.

; }Также можно использовать логическое && для рендеринга компонента, если условие истинно:function ShowWarning({ showWarning }) { return (

{showWarning &&

Warning: Something went wrong!

}

); }Условный рендеринг — это основной способ создания динамичных пользовательских интерфейсов, где разные компоненты или элементы появляются в зависимости от состояния приложения.