Reactの関数的なコンポーネントと高次のコンポーネント(装飾器、参飾り器)

import React from 'react';  //      
import ReactDom from 'react-dom';


const Wrapper = props => 
App component{props.count}
// stateless component     ，            ,            state ， state hook
function wrapper(Comp, props){  //          ，     
    return 

        App component{props.count}
        

        
        
}

//    
function wrapper(Comp){
    return function (props){  //   B  
        return 

        B component{props.count}
        

        
        
    }
}

//       ，                 
const wrapper = Comp => props => 
  {/*               */}
    B component{props.count}
    

    
    

//       ，    babel，             ，      
@wrapper  // A = wrapper(A)，     A       A 
// function A (props){return 
A component
}  //    ，        ，      
class A extends React.Component{
    render(){
        return 
A component
    }
}

// const B = wraper(A)

ReactDom.render(
    // ,  //      
    // ,
    ,
    document.getElementById('root')
)

import React from 'react';  //      
import ReactDom from 'react-dom';


//        
// function wrapper(vid){
//     return function (Comp){
//         return props => {  //       
//             return 

//                 {props.name}
//             

//             
//             
//         }
//     }
// }
 
let obj = {a: Green, b: KD }
const wrapper = vid => Comp => props => 
  {/*               */}
        {props.name}
    

    {/*  */}
      {/*          k、v ，       */}
    


@wrapper('test')  //        ; A = wrapper('test')(A)
class A extends React.Component{
    render(){
        return 
{this.props.name}      
            {this.props.test}  {/*       Klay */}
            

            {this.props.a}
  {/*       Green */}
            {this.props.b}  {/*       KD */}
        
    }
}


ReactDom.render(
    ,  //      A       A，       A 
    document.getElementById('root')
)