react with JSX for {if…else…}

原创 2016年05月30日 15:13:49

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

方案一:

class HelloMessage extends React.Component {
  render (){
    let userMessage;
    if (this.props.loggedIn) {
      userMessage = (
        <span>
          <h2>{ `Welcome Back ${ this.props.name }` }</h2>
          <p>You can visit settings to reset your password</p>
        </span>
      )
    } else {
      userMessage = (
        <h2>Hey man! Sign in to see this section</h2>
      )
    }
    return(
      <div>
        <h1>My Super React App</h1>
        { userMessage }
      </div>
    )
  }
}

方案二:

class HelloMessage extends React.Component {

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

  render (){        
    return(
      <div>
        <h1>My Super React App</h1>
        { this.renderUserMessage() }
      </div>
    )
  }
}

方案三:

class HelloMessage extends React.Component {
  render (){        
    return(
      <div>
        <h1>
          { this.props.loggedIn ?  'You are logged In' : 'You are not logged In' }
        </h1>
      </div>
    )
  }

方案四:

class HelloMessage extends React.Component {
  render (){
    return(
      <div>
        <h1>My Super React App</h1>
        { this.props.loggedIn ?
            <span>
              <h2>{ `Welcome Back ${ this.props.name }` }</h2>
              <p>You can visit settings to reset your password</p>
            </span>
            :
            <h2>Hey man! Log in to see this section</h2>
        }
      </div>
    )
  }
}

方案五:

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

    return (<span>
      <h2>Welcome Back {name}</h2>
      <p>You can visit settings to reset your password</p>
    </span>);
  }

  render (){
    return(
      <div>
        <h1>My Super React App</h1>
        {this.renderLogin()}
      </div>
    );
  }
}

综上:短小的字段判断只能用三元表达式,如果是大块的元素都需要区分,就要利用变量了。

JSX语法详解

JSX语法详解 本文在官方文档的基础上,进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节,JSX语法本身并不复杂,也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JS...
  • a153375250
  • a153375250
  • 2016年12月02日 14:24
  • 15016

JSX 中的 If-Else

原文地址:http://wiki.jikexueyuan.com/project/react/else-jsx.html 你没法在JSX中使用 if-else 语句,因为 JSX 只是函数调用和...
  • onegoldensun
  • onegoldensun
  • 2017年07月25日 16:07
  • 99

React-JSX详解

一、 1、JSX:即JavaScript XML——一种在React组建内部构建标签的类XML语法。(增强React程序组件的可读性); 2、使用动态值: JSX将两个花括号:{}渲染成动态值,花括...
  • slandove
  • slandove
  • 2016年02月25日 23:26
  • 10332

React-(if)条件渲染-condition

概述: 在React中,你封装很多基础组件,但是你是有选择使用特定的组件,这时候就需要依赖应用的状态,类似javaScript中if 1.例子: //定义基础组件 function Orange(){...
  • m0_37355951
  • m0_37355951
  • 2017年06月04日 12:50
  • 3011

React开发-JSX使用与详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: React开发-JSX使用与详解 HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JS...
  • pcaxb
  • pcaxb
  • 2016年12月29日 15:16
  • 1943

ReactJS学习笔记(四)-条件判断的几种形式

梦想不是挂在嘴边炫耀的空气。 在React中,一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用javascript强大的魔力,比如循环和条件判断等。想要在组件中...
  • yf275908654
  • yf275908654
  • 2016年04月06日 20:33
  • 7888

05、react之 条件判断的四种写法

条件判断的四种写法         1、三元表达式 ? : 2、使用变量,通过函数使用条件判断语句,返回一个字符串 3、直接在{}中调用函数 4、使用比较运算符 &&   ||  ...
  • chuipaopao163
  • chuipaopao163
  • 2017年06月18日 15:25
  • 1847

React中的条件渲染

React 中的条件渲染有以下几种方式: if 语句三元操作符(ternary operator)逻辑 && 操作符switch.. case.. 语句枚举(enums)多层条件渲染(multi...
  • hsany330
  • hsany330
  • 2017年10月10日 14:02
  • 358

React开发-JSX使用与详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: React开发-JSX使用与详解 HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JS...
  • pcaxb
  • pcaxb
  • 2016年12月29日 15:16
  • 1943

React入门笔记(一) — 深入理解JSX

《一》、理解JSX  JSX即Javascrpt XML— — 一种在React组件内部构建标签的类XML语法。   JSX并不是新语言,也没有改变JavaScript的语法,只是一种基于ECMAS...
  • mqy1023
  • mqy1023
  • 2016年06月02日 21:28
  • 3129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react with JSX for {if…else…}
举报原因:
原因补充:

(最多只允许输入30个字)