react渲染方式有哪些

这篇文章主要为大家展示了“react渲染方式有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“react渲染方式有哪些”这篇文章吧。

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好网站设计、成都网站建设服务，我们努力开拓更好的视野，通过不懈的努力，创新互联建站赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,成都小程序开发,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

react渲染方式有：1、利用条件表达式渲染，适用于两个组件二选一的渲染；2、利用“&&”操作符渲染，适用于一个组件有无的渲染；3、利用变量输出组件渲染；4、利用函数方法输出组件或者利用函数式组件进行渲染。

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

React 组件条件渲染的几种方式

一、条件表达式渲染 （适用于两个组件二选一的渲染）

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}
      
    );
  }

四、利用函数方法输出组件或者利用函数式组件进行渲染 （适用于多个子组件需要根据复杂的条件输出的情况）

1. 函数方式

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

        
        {this.renderButton()}
      
    );
  }

2. 函数式组件

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

以上是“react渲染方式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！