巩固——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 会忽略并跳过它。