jsx中使用判断语句

在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。以下有几种判断方式，可以根据自己的应用场景，挑选适合的。

方案一：

class HelloMessage extends React.Component {
  render (){
    let userMessage;
    if (this.props.loggedIn) {
      userMessage = (
        
          
{ `Welcome Back ${ this.props.name }` }
          
You can visit settings to reset your password
        
      )
    } else {
      userMessage = (
        
Hey man! Sign in to see this section
      )
    }
    return(
      

        
My Super React App
        { userMessage }
      
    )
  }
}

方案二：

class HelloMessage extends React.Component {

  renderUserMessage(){
    if (this.props.loggedIn) {
      return (
        
          
{ `Welcome Back ${ this.props.name }` }
          
You can visit settings to reset your password
        
      );
    } else {
      return (
        
Hey man! Log in to see this section
      );
    }
  }

  render (){        
    return(
      

        
My Super React App
        { this.renderUserMessage() }
      
    )
  }
}

方案三：

class HelloMessage extends React.Component {
  render (){        
    return(
      

        

          { this.props.loggedIn ?  'You are logged In' : 'You are not logged In' }
        
      
    )
  }

方案四：

class HelloMessage extends React.Component {
  render (){
    return(
      

        
My Super React App
        { this.props.loggedIn ?
            
              
{ `Welcome Back ${ this.props.name }` }
              
You can visit settings to reset your password
            
            :
            
Hey man! Log in to see this section
        }
      
    )
  }
}

方案五：

// 拆分成小函数
class HelloMessage extends React.Component {
  renderLogin() { // 如果这里有多行，推荐用这种方法
    const {loggedIn, name} = this.props;
    if (!loggedIn) return;

    return (
      
Welcome Back {name}
      
You can visit settings to reset your password
    );
  }

  render (){
    return(
      

        
My Super React App
        {this.renderLogin()}
      
    );
  }
}

综上：短小的字段判断只能用三元表达式，如果是大块的元素都需要区分，就要利用变量了。
转自：https://blog.csdn.net/wmzy1067111110/article/details/51538241