react渲染方式的几种是什么

本教程操作环境：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"));

【相关推荐：Redis视频教程】

以上就是react渲染方式的几种是什么的详细内容，更多请关注php中文网其它相关文章！

关键词：相关文章视频教程条件表达式