高阶组件

可以理解为vue的混入吧，但是没有那个方便（个人见解）

挂载的全局App.jsx的代码

import React from 'react';
import LearnFunction05 from './LearnFunction05'; //  这个是高阶函数的用法
export default function boxReact() {return (<div><LearnFunction05 /></div>)
}

使用高阶组件的代码

import React from 'react'
// 高阶组件 
import HocTemplate from './hoc/hocTemplate'
function LearnFunction05(props) {console.log(props.num);return (<div><div>LearnFunction05</div> </div>)
}export default HocTemplate(LearnFunction05)

HocTemplate 是自己写好的高阶组件,以下是高阶组件的代码。

import React from "react";
const HocTemplate = (WrappedComponent) => {return (props)=>{console.log(props);return (<div><h1>这是高阶组件的头部</h1><WrappedComponent {...props}/><h1>这是高阶组件的尾部</h1></div>)}
}
export default HocTemplate;

WrappedComponent这个是被修饰的组件,如上面的

export default HocTemplate(LearnFunction05)

这个就是将05这个方法传入进去修饰。

props丢失问题

如果在app传参给05组件的话 ， 此时是拿不到传递参数，因为这个参数是被高阶组件修饰过的，所以已经传给高阶组件了。

可以用上面的方式将参数传给这个传过来的组件，这样的话，这个组件就可以接收到相应的信息。