react渲染方式有哪些

這篇文章主要為大家展示了“react渲染方式有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“react渲染方式有哪些”這篇文章吧。

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,成都小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

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

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

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

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

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

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

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );
}

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

render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    const button = isLoggedIn ? (
      
    ) : (
      
    );
 
    return (
      

        
        {button}
      
    );
  }

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

1. 函數(shù)方式

renderButton(){
    const isLoggedIn = this.state.isLoggedIn;
    if(isLoggedIn)
    {
       return ();
    }
    else
    {
      return ();
    }
}
 
render() {
    return (
      

        
        {this.renderButton()}
      
    );
  }

2. 函數(shù)式組件

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

以上是“react渲染方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：react渲染方式有哪些
網(wǎng)站路徑：http://m.jiaotiyi.com/article/gciiej.html