React-（if）条件渲染-condition

概述：

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

1.例子：

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

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

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

//红桃
function Heart(props) {
  return (
    <button onClick={props.onClick}>
      红桃
    </button>
  );
}
//红桃A
function HeartA() {
  return (
    <h1>
      红桃A
    </h1>
  );
}
//黑桃
function Spade(props) {
 
  return (
    <button onClick={props.onClick}>
      黑桃
    </button>
  );
}
//黑桃A
function SpadeA() {
  return (
    <h1>
      黑桃A
    </h1>
  );
}
//梅花
function Club(props) {
  return (
    <button onClick={props.onClick}>
      梅花
    </button>
  );
}
//梅花A
function ClubA() {
  return (
    <h1>
      梅花A
    </h1>
  );
}
//方块
function Diamond(props) {
  return (
    <button onClick={props.onClick}>
      方块
    </button>
  );
}
//方块A
function DiamondA() {
  return (
    <h1>
      方块A
    </h1>
  );
}

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 = <Heart onClick={this.handleHeart} />;
      element = <HeartA />;
    } else if (2 == (suits % 4)) {
      button = <Spade onClick={this.handleSpade} />;
      element = <SpadeA />;
    } else if (3 ==(suits % 4)) {
      button = <Club onClick={this.handleClub} />;
      element = <ClubA />;
    } else {
      button = <Diamond onClick={this.handleDiamond} />;
      element = <DiamondA />;
    }
    console.log(suits);
    return (
      <div>
        {element}
        {button}
      </div>
    );
  
  }
}

ReactDOM.render(
  <Poker />, 
  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 <div>
  <h1>欢迎你来到厨房</h1>
  {
    p=='有米了'&&
      <h1>{p},开始煮饭</h1>
  }
  {
    p=='没有米了'&&
      <h1>{p},快去买米</h1>
  }
   </div>
}
ReactDOM.render(
  <Cook process='有米了'/>,
  document.getElementById('root')
);

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

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

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

function ThirdOperator(props){
  var f = props.fruit;
  //三元运算符
  return <h1>
        {f=='orange'? '橘子':'其他'}
      </h1>
}
ReactDOM.render(
  <ThirdOperator fruit='orange'/>,
  document.getElementById('root')
);

5.避免一些组件的渲染

function Warnings(props){
  if(props.isRight=='true'){
    //通过 null 避免如下渲染
    return null;
  }
  return <div>
        <h1>请输入正确密码</h1>
      </div>
}


ReactDOM.render(
  <Warnings isRight='false'/>,
  document.getElementById('root')
);

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