React.js高阶函数的定义与使用

 1 /* 高阶函数的定义与使用
 2       一： 先定义一个普通组件
 3       二： 用function higherOrder(WrappendComponent) {
 4                 return 
 5             } 将组件包裹起来，并用export default higherOrder将这个高阶函数抛出去
 6       三： 使用时先导入这个高阶函数，直接将组件以参数的方式传递进来即可
 7 */
 8 import React,{Component} from ‘react‘;
 9 
10 /** 
11  * 定义高阶函数
12  */
13 function higherOrder(WrappendComponent) {
14     return class A extends Component {
15         render() {
16             return (
17                 // 这个 WrappendComponent 将被传递进来的组件代替
18                 <WrappendComponent />
19             );
20         }
21     }
22 }
23 export default higherOrder;
24 // ===================================== 分界符 ==============================================
25 /** 
26  * 使用高阶函数
27  *   一： 先将高阶函数引入
28  *   二： 将组件以参数的方式传递进去
29  */
30 import higherOrder from ‘./‘;
31 class B extends Component {
32     render() {
33         return (
34             <div>
35                 子组件
36             </div>
37         );
38     }
39 }
40 // 调用高阶函数：
41 export default higherOrder(B)