rss rss hh new
rss_rss_hh_new

 -

rss_rss_hh_new

 - e-mail

 

 -

LiveInternet.ru:
: 17.03.2011
:
:
: 51

:


jsx

, 06 2017 . 08:16 +
React, jsx. , , js, React.createElement, jsx , . . jsx . js-. , . , js- html, js- html. , html . html , . . , javascript , . babel transform-react-statements.



For



. jsx-, , js-. :

const MyComponent = props =>
    
    
        
            
  • 
                {item.text}
            
    •

, :

var _this = this;
 
const MyComponent = props =>
    
    
        {Array.prototype.map.call(props.items, function (item, index) {
            return 
  • 
                {item.text}
            
    • ;
        }, _this)}
    
;


For. in. , (, ). , .. .
each . . , spread-.

:


    {Array.prototype.map.call(items, function (value, index) {
        return ;
    }, this)}


, , index. counter:


    

        
            

                { cell.content }


key



React, key. , . - key-is. . keyIs . key - -.

.babelrc
{
    plugins: [["transform-react-statements", { keyIs: "id" }]]
}




    
        
{ item.value }

    
    
        
{ item.value }

    
    
        
{ item.value }

:


    {Array.prototype.map.call(array, function (item) {
        // key    
        return 
{item.value}
;
    }, this)}
    {Array.prototype.map.call(array, function (item) {
        // key -   
        return 
{item.value}
;
    }, this)}
    {Array.prototype.map.call(array, function (item) {
        //   React 
        return 
{item.value}
;
    }, this)}

;


If



:


    { condition &&  }


, html- . : true, false, . , :


    
        
  1 

        
  2


:

    { !someCondition && 
  1 
 }
    { !someCondition && 
  2 
 }


Switch..Case..Default



Switch , javascript. Switch value, , Case, value. Case, Default. Default , null.

    
        
            
 Text 1 

        
        
            
 Text 2 

        
        
            
 Text 3 

        
        
            
 Default text


Component



. :


       
 text 






props => 
 text 
;


, props, props:

:

item => 
;




, :

class MyComponent extends React.Component {
    render() {
        return 
            

                {item.text}
            

        
    }
}


For , . render React-. , , . :

class MyComponent extends React.Component {
    render() {
        return 

            
                

                    {item.text}
                

            
        

    }
}


. react-. , . , wrapper :

{
    plugins: [["transform-react-statements", { wrapper: '
' }]]
}


, no-wrap:

{
    plugins: [["transform-react-statements", { wrapper: "no-wrap" }]]
}




, , . disabled:

{
    plugins: [["transform-react-statements", { disabled: ["If"]}]]
}


, jsx , , IfStatement:

{
    plugins: [["transform-react-statements", { rename: { "If": "IfStatement" } }]]
}


, . jsx, - . , , jsx javascript-.

P.S. github, .
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/330172/

:  

— — : [1] []
 

:
: 

: ( )

:

  URL