React.js高阶函数的定义与使用
发布时间:2020-12-15 16:16:37 所属栏目:百科 来源:网络整理
导读:1 /* 高阶函数的定义与使用 2 一: 先定义一个普通组件 3 二: 用function higherOrder(WrappendComponent) { 4 return 5 } 将组件包裹起来,并用export default higherOrder将这个高阶函数抛出去 6 三: 使用时先导入这个高阶函数,直接将组件以参数的方式
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) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |