React-（if）条件渲染-condition

概述：

在React中，你封装很多基础组件，但是你是有选择使用特定的组件，这时候就需要依赖应用的状态，类似javaScript中if

1.例子：

//定义基础组件
function Orange(){
  return 
我喜欢橘子
}

function Apple(){
  return 
我喜欢苹果
}
//进行选择
function GetFavor(props){
  const favor = props.fruit;
  if(favor=='orange'){
    return 
  }else{
    return 
  }
}
//渲染
ReactDOM.render(
  ,
   document.getElementById('root')
);

2.实现红桃、黑桃、梅花、方块不断地循环切换的效果，类似图片轮播

//红桃
function Heart(props) {
  return (
    
      红桃
    
  );
}
//红桃A
function HeartA() {
  return (
    

      红桃A
    
  );
}
//黑桃
function Spade(props) {
 
  return (
    
      黑桃
    
  );
}
//黑桃A
function SpadeA() {
  return (
    

      黑桃A
    
  );
}
//梅花
function Club(props) {
  return (
    
      梅花
    
  );
}
//梅花A
function ClubA() {
  return (
    

      梅花A
    
  );
}
//方块
function Diamond(props) {
  return (
    
      方块
    
  );
}
//方块A
function DiamondA() {
  return (
    

      方块A
    
  );
}

class Poker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { suit: 1 };
    this.handleHeart = this.handleHeart.bind(this);
    this.handleSpade = this.handleSpade.bind(this);
    this.handleClub = this.handleClub.bind(this);
    this.handleDiamond = this.handleDiamond.bind(this);
  }
  handleHeart() {
    this.setState({ suit: (this.state.suit+1) });
  }
  handleSpade() {
    this.setState({ suit: (this.state.suit+1) });
    
  }
  handleClub() {
    this.setState({ suit: (this.state.suit+1) });
  }
  handleDiamond() {
    this.setState({ suit: (this.state.suit+1) });
  }

  render() {
    const suits = this.state.suit;
    let button = null;
    let element =null;
    if (1 == (suits % 4)) {
      button = ;
      element = ;
    } else if (2 == (suits % 4)) {
      button = ;
      element = ;
    } else if (3 ==(suits % 4)) {
      button = ;
      element = ;
    } else {
      button = ;
      element = ;
    }
    console.log(suits);
    return (
      

        {element}
        {button}
      
    );
  
  }
}

ReactDOM.render(
  , 
  document.getElementById("root")
);

总结：以上大概分为三大部分

1、基础组件创建（按钮，文本）

2、组件进行有组织选择 这里关键就是对suit都4取模运算，所以它会的值会0、1、2、3变化，每点击一次加一

3、渲染部分

注意事项：1、记得绑定this，不然方法无效（undefined）

    2、细心同学发现let ，它和var区别什么，简单理解（let局部变量） var全局变量

3.React 中&&和||用法（都是短路运算，类似java，但有点不同）

function Cook(props){
  var p = props.process;
 return 

  
欢迎你来到厨房
  {
    p=='有米了'&&
      
{p},开始煮饭
  }
  {
    p=='没有米了'&&
      
{p},快去买米
  }
   
}
ReactDOM.render(
  ,
  document.getElementById('root')
);

总结：你会发现，前面是条件，后面逻辑处理，不像java只是作为条件之间的连接符，而是条件和逻辑进行连接  

如果是||的话，前面为条件为true，||后面逻辑不会执行。你可以去试一下。

4.三元运算 条件？真：假

function ThirdOperator(props){
  var f = props.fruit;
  //三元运算符
  return 

        {f=='orange'? '橘子':'其他'}
      
}
ReactDOM.render(
  ,
  document.getElementById('root')
);

5.避免一些组件的渲染

function Warnings(props){
  if(props.isRight=='true'){
    //通过 null 避免如下渲染
    return null;
  }
  return 

        
请输入正确密码
      
}


ReactDOM.render(
  ,
  document.getElementById('root')
);

总结：主要React分支判断，合理组装Component