«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Условный рендеринг в React

Условный рендеринг в React

Опубликовано 8 ноября 2024 г.
Просматривать:289

Conditional Rendering in React

Условный рендеринг в React позволяет визуализировать различные компоненты или элементы на основе определенных условий, таких как состояние или реквизиты. Вот несколько распространенных методов условного рендеринга:

1. Использование операторов if-else

Внутри вашего компонента можно использовать стандартные операторы JavaScript if-else.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 

Welcome back!

; } else { return

Please sign in.

; } }

2. Использование тернарных операторов

Это краткий способ рендеринга контента на основе условия.

function MyComponent({ isLoggedIn }) {
    return (
        

{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}

); }

3. Использование логического оператора &&

Вы можете использовать логический оператор И для визуализации компонента, только если условие истинно.

function MyComponent({ isLoggedIn }) {
    return (
        
{isLoggedIn &&

Welcome back!

} {!isLoggedIn &&

Please sign in.

}
); }

4. Оператор Switch

Для более сложных условий можно использовать оператор переключения.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 

Loading...

; case 'success': return

Data loaded successfully!

; case 'error': return

There was an error!

; default: return null; } }

Пример

Вот полный пример использования функциональных компонентов:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        
{isLoggedIn ?

Welcome back!

:

Please sign in.

}
); } export default App;

Краткое содержание

Выберите метод, который лучше всего соответствует вашим потребностям, исходя из сложности ваших условий и вашего личного стиля программирования. Дайте мне знать, если вам нужны дополнительные примеры или объяснения!

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/imyusufakhtar/conditional-rendering-in-react-43h2?1. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить их.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3