vlambda博客
学习文章列表

// HocPage.js 

import React, {Component} from "react"; 

// hoc: 是⼀个函数，接收⼀个组件，返回另外⼀个组件 

//这⾥⼤写开头的Cmp是指function或者class组件 

const foo = Cmp => props => { 

    return ( 

        <div className="border"> 

            <Cmp {...props} />

        </div> 

    ); 

};

// const foo = Cmp => {

//     return props => { 

//         return ( 

//             <div className="border"> 

//             <Cmp {...props} /> 

//         </div> 

//         ); 

//     };

// };

function Child(props) {

    return <div> Child {props.name}</div>; 

} 

const Foo = foo(Child);

export default class HocPage extends Component {

    render() {

        return ( 

            <div>

                <h3>HocPage</h3> 

                <Foo name="msg" />

            </div> 

        );

    } 

}