当前位置：首页 > 文章列表 > 文章 > 前端 > React 中的条件渲染

React 中的条件渲染

来源：dev.to 2024-10-05 12:01:02 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《React 中的条件渲染》，涉及到，有需要的可以收藏一下

React 中的条件渲染

react 中的条件渲染允许您根据某些条件（例如状态或道具）渲染不同的组件或元素。以下是一些实现条件渲染的常用方法：

1. 使用 if-else 语句

您可以在组件内使用标准 javascript if-else 语句。

function mycomponent({ isloggedin }) {
    if (isloggedin) {
        return <h1>welcome back!</h1>;
    } else {
        return <h1>please sign in.</h1>;
    }
}

2. 使用三元运算符

这是一种根据条件呈现内容的简洁方法。

function mycomponent({ isloggedin }) {
    return (
        <h1>
            {isloggedin ? 'welcome back!' : 'please sign in.'}
        </h1>
    );
}

3. 使用逻辑&&运算符

仅当条件为真时，您才可以使用逻辑 and 运算符来渲染组件。

function mycomponent({ isloggedin }) {
    return (
        <div>
            {isloggedin && <h1>welcome back!</h1>}
            {!isloggedin && <h1>please sign in.</h1>}
        </div>
    );
}

4. switch 语句

对于更复杂的条件，可以使用 switch 语句。

function mycomponent({ status }) {
    switch (status) {
        case 'loading':
            return <h1>loading...</h1>;
        case 'success':
            return <h1>data loaded successfully!</h1>;
        case 'error':
            return <h1>there was an error!</h1>;
        default:
            return null;
    }
}

例子

这是使用功能组件的完整示例：

import React from 'react';

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

    return (
        <div>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

export default App;