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

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

 ... 

上面的写法是错误的

按照自己使用场景，挑选合适的方法：

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

1、三目运算符

return 
Hello, {this.props.name ? this.props.name : "World"}
;

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

return 
Hello, {this.props.name ? this.props.name : World}
;

2、使用函数

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

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

或者：

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

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

return 
Hello,{this.props.name && "World"}

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