本文共 1924 字，大约阅读时间需要 6 分钟。

import React from 'react';  // 此句不能少import ReactDom from 'react-dom';const Wrapper = props => 
   
    App component{props.count}
   
// stateless component无状态组件，现在喜欢被称为函数式组件,现在这种定义的组件可以写state了，如state hookfunction 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'))

转载地址：http://lvfvi.baihongyu.com/