您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“react渲染方式有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“react渲染方式有哪些”這篇文章吧。
react渲染方式有:1、利用條件表達(dá)式渲染,適用于兩個(gè)組件二選一的渲染;2、利用“&&”操作符渲染,適用于一個(gè)組件有無的渲染;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è)組件有無的渲染)
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h2>Hello!</h2> {unreadMessages.length > 0 && <h3> You have {unreadMessages.length} unread messages. </h3> } </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') );
以上是“react渲染方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。