react渲染方式有：1、利用條件表達(dá)式渲染，適用于兩個(gè)組件二選一的渲染；2、利用“&&”操作符渲染，適用于一個(gè)組件有無(wú)的渲染；3、利用變量輸出組件渲染；4、利用函數(shù)方法輸出組件或者利用函數(shù)式組件進(jìn)行渲染。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

React 組件條件渲染的幾種方式

一、條件表達(dá)式渲染 （適用于兩個(gè)組件二選一的渲染）

render() {   const isLoggedIn = this.state.isLoggedIn;   return (     <div>       {isLoggedIn ? (         <LogoutButton onClick={this.handleLogoutClick} />       ) : (         <LoginButton onClick={this.handleLoginClick} />       )}     </div>   ); }

二、&& 操作符渲染 (適用于一個(gè)組件有無(wú)的渲染)

function Mailbox(props) {   const unreadMessages = props.unreadMessages;   return (     <div>       <h1>Hello!</h1>       {unreadMessages.length > 0 &&         <h2>           You have {unreadMessages.length} unread messages.         </h2>       }     </div>   ); }

三、利用變量輸出組件渲染 （適用于有多個(gè)組件多種條件下的渲染）

render() {     const isLoggedIn = this.state.isLoggedIn;       const button = isLoggedIn ? (       <LogoutButton onClick={this.handleLogoutClick} />     ) : (       <LoginButton onClick={this.handleLoginClick} />     );       return (       <div>         <Greeting isLoggedIn={isLoggedIn} />         {button}       </div>     );   }

四、利用函數(shù)方法輸出組件或者利用函數(shù)式組件進(jìn)行渲染 （適用于多個(gè)子組件需要根據(jù)復(fù)雜的條件輸出的情況）

1. 函數(shù)方式

renderButton(){     const isLoggedIn = this.state.isLoggedIn;     if(isLoggedIn)     {        return (<LogoutButton onClick={this.handleLogoutClick} />);     }     else     {       return (<LoginButton onClick={this.handleLoginClick} />);     } }   render() {     return (       <div>         <Greeting />         {this.renderButton()}       </div>     );   }

2. 函數(shù)式組件

function Greeting(props) {   const isLoggedIn = props.isLoggedIn;   if (isLoggedIn) {     return <UserGreeting />;   }   return <GuestGreeting />; }   ReactDOM.render(   // Try changing to isLoggedIn={true}:   <Greeting isLoggedIn={false} />,   document.getElementById('root') );

【