@bart
В React.js условные операторы можно использовать для отображения компонентов или элементов в зависимости от определенных условий.
Наиболее распространенный способ использования условных операторов в React.js - это использование тернарного оператора. Тернарный оператор позволяет легко изменять содержимое JSX в зависимости от условий. Например, вот пример использования тернарного оператора для отображения компонента в зависимости от значения свойства isLoggedIn
:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function App(props) { const { isLoggedIn } = props; return ( <div> {isLoggedIn ? ( <p>Welcome, user!</p> ) : ( <p>Please log in.</p> )} </div> ); } |
В этом примере компонент App
отображает p
элемент, в зависимости от значения свойства isLoggedIn
.
Также можно использовать оператор if...else
в JSX. В этом случае нужно использовать блок {}
для оборачивания оператора if
и его тела. Например:
1 2 3 4 5 6 7 8 9 |
function App(props) { const { isLoggedIn } = props; if (isLoggedIn) { return <p>Welcome, user!</p>; } else { return <p>Please log in.</p>; } } |
В этом примере компонент App
отображает p
элемент в зависимости от значения свойства isLoggedIn
.
Наконец, можно использовать оператор switch
в JSX для отображения различных компонентов в зависимости от значения определенного свойства или переменной. В этом случае нужно использовать блок {}
для оборачивания оператора switch
и его тела. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function App(props) { const { page } = props; switch (page) { case 'home': return <HomePage />; case 'about': return <AboutPage />; case 'contact': return <ContactPage />; default: return <NotFoundPage />; } } |
В этом примере компонент App
отображает различные компоненты в зависимости от значения свойства page
.