如何在 ReactJS 中有条件地渲染组件？

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

当使用 React 设计 UI 时，我们会遇到一种情况，即组件要根据某些条件呈现在屏幕上。例如，在大学信息系统中，当教师登录时，会呈现不同的组件，而当学生登录时，会呈现不同的组件。

这称为 React 组件的条件渲染。

条件渲染：创建多个组件并根据某些条件进行渲染。这也是 React 支持的一种封装。

如何进行条件渲染？

它是使用stateVariable完成的。 stateVariable 的值决定是否渲染组件。它的值可以通过任何事件（如 onClick）的发生来改变。

创建反应应用程序：

第 1 步：使用以下命令创建一个反应应用程序。

npx create-react-app foldername

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序。

cd foldername

项目结构：项目结构应如下所示：

示例 1：在此示例中，我们将使用 stateVariable； isLoggedIn ，最初设置为 false 。使用按钮切换其值。如果 isLoggedIn 为 false，则用户退出，如果为 true，则用户登录。当用户登录时，使用条件运算符，组件将呈现在屏幕上。

条件运算符：

{statement} ? true : false

Javascript

import React from 'react'
import { useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
function DisplayLoggedOut() {
    return (
        
             Please Login
        
    )
}
function DisplayLoggedIn() {
    return (
        
            
                 You are Logged In
            
            Courses available on GeeksforGeeks
            
                
                    
                        
                        
                            
                                Java
                            
                            
                                The Java codes are first compiled into byte 
                                code (machine-independent code). Then the byte 
                                code runs on Java Virtual Machine (JVM) 
                                regardless of the underlying architecture.
                            
                        
                    
                
            
        
    )
}
function Rendering() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const handleLoginButton = () => {
        if (isLoggedIn) {
            setIsLoggedIn(false);
        }
        else {
            setIsLoggedIn(true);
        }
    }
    return (
        
            GeeksforGeeks
            Conditionally Rendering Components in React
            {isLoggedIn == false ?  : }
            
        
    )
}
function App() {
    return (
        
            
        
    );
}
export default App;

Javascript

import React from 'react'
import { useState } from 'react';
import Table from 'react-bootstrap/Table'
function DisplayLoggedOut() {
    return (
        
             Please Login
        
    )
}
function DisplayLoggedIn() {
    return (
        
            
                 You are Logged In
            
            List of Students
            
                
                    
                        
                            
                            
                            
                            
                        
                    
                    
                        
                            
                            
                            
                            
                        
                        
                            
                            
                            
                            
                        
                        
                            
                            
                            
                            
                        
                    
                # First Last Address
1 Muskan Roomie Lucknow
2 Pratiksha Singh Ajamgarh
3 Nishi Mehrotra Prayagraj
            
        
    )
}
function Rendering() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const handleLoginButton = () => {
        if (isLoggedIn) {
            setIsLoggedIn(false);
        }
        else {
            setIsLoggedIn(true);
        }
    }
    return (
        
            GeeksforGeeks
            Conditionally Rendering Components in React
            {isLoggedIn == false ?  : }
            
        
    )
}
function App() {
    return (
        
            
        
    );
}
export default App;

#	First	Last	Address
1	Muskan	Roomie	Lucknow
2	Pratiksha	Singh	Ajamgarh
3	Nishi	Mehrotra	Prayagraj

运行应用程序的步骤：通过在 src 中执行以下命令来运行您的应用程序

npm start

输出：

示例 2：我们在用户登录后显示了一个 Bootstrap 表，使用：

import Table from 'react-bootstrap/Table'

Javascript

import React from 'react'
import { useState } from 'react';
import Table from 'react-bootstrap/Table'
function DisplayLoggedOut() {
    return (
        
             Please Login
        
    )
}
function DisplayLoggedIn() {
    return (
        
            
                 You are Logged In
            
            List of Students
            
                
                    
                        
                            
                            
                            
                            
                        
                    
                    
                        
                            
                            
                            
                            
                        
                        
                            
                            
                            
                            
                        
                        
                            
                            
                            
                            
                        
                    
                # First Last Address
1 Muskan Roomie Lucknow
2 Pratiksha Singh Ajamgarh
3 Nishi Mehrotra Prayagraj
            
        
    )
}
function Rendering() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const handleLoginButton = () => {
        if (isLoggedIn) {
            setIsLoggedIn(false);
        }
        else {
            setIsLoggedIn(true);
        }
    }
    return (
        
            GeeksforGeeks
            Conditionally Rendering Components in React
            {isLoggedIn == false ?  : }
            
        
    )
}
function App() {
    return (
        
            
        
    );
}
export default App;

#	First	Last	Address
1	Muskan	Roomie	Lucknow
2	Pratiksha	Singh	Ajamgarh
3	Nishi	Mehrotra	Prayagraj

输出：