概要:
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に変化します.クリックごとに1回プラスします.
3、レンダリング部分
注意事項:1、結合thisを覚えてください.そうでなければ、方法は無効です.
    2、注意深い学友はletを発見して、それはvarと何を区別して、簡単に(let局部変数)varグローバル変数を理解します.
3.Reactの&&12539;と124の使い方(短絡演算でjavaに似ていますが、ちょっと違います.)

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

  
       
  {
    p=='   '&&
      
{p},    
  }
  {
    p=='    '&&
      
{p},    
  }
   
}
ReactDOM.render(
  ,
  document.getElementById('root')
);

まとめ:前は条件で、後は論理処理で、javaとは違って条件間のコネクタとしてだけでなく、条件と論理が接続されていることが分かります.  
124 124なら、前の条件は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を合理的に組み立てる