巩固——React中如何使用判断?

if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript:

<div className={if(true){ 'isActive' }}> ... </div>

上面的写法是错误的

按照自己使用场景,挑选合适的方法:

  1. 使用三目运算符
  2. 使用函数
  3. 使用逻辑运算符

1、三目运算符

return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;

上面的表达式中,如果需要加标签可以写成这样:

return <p>Hello, {this.props.name ? <span>this.props.name<span> : <span>World</span>}</p>;

2、使用函数

将逻辑信息全部封装到函数中,在需要的时候调用:

function getName(){ //判断封装在函数中
   if(this.props.name){
      return this.props.name
   }else{
      return "World"
   }
}
var name = getName() //调用
return <p>Hello,{name}</p>

或者:

function getName(){ //判断封装在函数中
   if(this.props.name){
      return this.props.name
   }else{
      return "World"
   }
}
return <p>Hello,{getName()}</p> //调用

3、使用逻辑与(&&)运算符

return <p>Hello,{this.props.name && "World"}</p>

解释: 因为在 JavaScript 中,true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
意思就是,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。

发表评论

电子邮件地址不会被公开。 必填项已用*标注