3.9. React conditional rendering

发布时间 ： 2025-10-25 13:34:30 UTC      

Page Views: 49 views

In React can create different components to encapsulate the various behaviors you need. You can then render only some of them according to the state changes of the application.

React the conditional rendering in is consistent with that in JavaScript, using the JavaScript operator if or conditional operator to create an element that represents the current state, and then let React update them according to them UI .

Let’s take a look at two components:

function UserGreeting(props) {
  return 
Welcome back!
;
}

function GuestGreeting(props) {
  return 
Please register first.
;
}

We will create a Greeting component, which displays one of them based on whether the user is logged in:

3.9.1. React instance 

functionGreeting(props){constisLoggedIn=props.isLoggedIn;if(isLoggedIn){return<UserGreeting/>;}return<GuestGreeting/>;}ReactDOM.render(//Attempt to modify
isLoggedIn={true}:<GreetingisLoggedIn={false}/>,document.getElementById('example'));

Element variable

You can use variables to store elements. It can help you conditionally render part of the component, while the rest of the output will not be changed.

In the following example, we are going to create a file named LoginControl the stateful components of the

It will render according to its current state or which will also render the .

3.9.2. React instance 

classLoginControlextendsReact.Component{constructor(props){super(props);this.handleLoginClick=this.handleLoginClick.bind(this);this.handleLogoutClick=this.handleLogoutClick.bind(this);this.state={isLoggedIn:false};}handleLoginClick(){this.setState({isLoggedIn:true});}handleLogoutClick(){this.setState({isLoggedIn:false});}render(){constisLoggedIn=this.state.isLoggedIn;letbutton=null;if(isLoggedIn){button=
<LogoutButtononClick={this.handleLogoutClick}/>;}else{button=
<LoginButtononClick={this.handleLoginClick}/>;}return(<div>
<GreetingisLoggedIn={isLoggedIn}/>{button}div>);}}ReactDOM.render(<LoginControl/>,document.getElementById('example'));
   
 
 And operator   &&    
 
 You can embed any expression in JSX by wrapping the code in curly braces, including JavaScript’s logic and   &&   which can easily conditionally render an element 
 
  
 
  3.9.3.  React instance  
 
 
 
functionMailbox(props){constunreadMessages=props.unreadMessages;return(


Hello!
{unreadMessages.length>0&& 

You have {unreadMessages.length} unread messages.

}
);}constmessages=['React','Re: React','Re:Re:
React'];ReactDOM.render(,document.getElementById('example'));
   
 In JavaScript   true   &&   expression   always return.   expression   , and   false   &&   expression   always return.   false   . 
 
 Therefore, if the condition is   true   , the element to the right of   &&   will be rendered; if it is   false   ,   React   will ignore and skip it. 
 
 
 Ternary operator  
 
 Another method of conditional rendering is to use the conditional operator of JavaScript: 
 
 
 
condition ? true : false。

 
 
 
 In the following example, we use it to conditionally render a small piece oftext.   render()   {   const   isLoggedIn   =   this.state.isLoggedIn;   return   (   The   user   is   {isLoggedIn   ?   'currently'   :   'not'}   logged   in.   );   }   it can also be used in larger expressions, although not very intuitive: 
 
 
 
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}
    
 
 Prevent components from rendering  
 
 In rare cases, you may want to hide the component, even if it is rendered byother components. Let   render   method returns   null   instead of its rendering results can be achieved. 
 
 In the following example      according to attribut   warn   conditional rendering of the value of the If   warn   the value of``false`` the component does not render:    
 
  3.9.4.  React instance  
 
 
 
functionWarningBanner(props){if(!props.warn){returnnull;}return(
warn!
);}classPageextendsReact.Component{constructor(props){super(props);this.state={showWarning:true}this.handleToggleClick=this.handleToggleClick.bind(this);}handleToggleClick(){this.setState(prevState=>({showWarning:
!prevState.showWarning}));}render(){return(


{this.state.showWarning?'hide':'display'}
);}}ReactDOM.render(,document.getElementById('example'));
   
 Component   render   method returns   null   does not affect the callback of the component’s lifecycle method. For example,   componentWillUpdate   and   componentDidUpdate   it can still be called. 
 

 
 

                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            3.9. React conditional rendering 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.