Условный рендеринг в React позволяет визуализировать различные компоненты или элементы на основе определенных условий, таких как состояние или реквизиты. Вот несколько распространенных методов условного рендеринга:
Внутри вашего компонента можно использовать стандартные операторы JavaScript if-else.
function MyComponent({ isLoggedIn }) { if (isLoggedIn) { returnWelcome back!
; } else { returnPlease sign in.
; } }
Это краткий способ рендеринга контента на основе условия.
function MyComponent({ isLoggedIn }) { return ({isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
); }
Вы можете использовать логический оператор И для визуализации компонента, только если условие истинно.
function MyComponent({ isLoggedIn }) { return ({isLoggedIn &&); }Welcome back!
} {!isLoggedIn &&Please sign in.
}
Для более сложных условий можно использовать оператор переключения.
function MyComponent({ status }) { switch (status) { case 'loading': returnLoading...
; case 'success': returnData loaded successfully!
; case 'error': returnThere was an error!
; default: return null; } }
Вот полный пример использования функциональных компонентов:
import React from 'react'; function App() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); return ({isLoggedIn ?); } export default App;Welcome back!
:Please sign in.
}
Выберите метод, который лучше всего соответствует вашим потребностям, исходя из сложности ваших условий и вашего личного стиля программирования. Дайте мне знать, если вам нужны дополнительные примеры или объяснения!
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3