默认JSX不支持此类标签, 我们需要一个插件来实现.

jsx-control-statements提供了这个功能.

安装

npm install --save-dev jsx-control-statements

语法

If

// simple
      
     IfBlock
    // using multiple child elements and / or expressions
    
       one  { "two" }  
     three  
     four
    

Choose

      
         
      IfBlock  
       
         
      ElseIfBlock    
      Another ElseIfBlock    
      ...  
       
         
      ElseBlock  
     
    // default block is optional; minimal example:
      
         
      IfBlock  
     
    

When & Otherwise

// Before transformation
      
         
      IfBlock1  
       
         
      IfBlock2  
       
         
      ElseBlock  
     
    // After transformation{ test1 ? IfBlock1 : test2 ? IfBlock2 : ElseBlock }

For

// you must provide the key attribute yourself  
        
     { item.title }  
      // using the index as key attribute is not stable if the array changes  
        
     { item }    
     Static Text  
    

github