react高阶组件的用法，使用高阶组件制作通用弹窗

PC端网页通用的提示弹窗样式大同小异：黑色遮罩层+弹窗内容
用react做这种需求的思路：可以把遮罩层当做是一个组件，弹窗实际显示的内容也作为一个组件，并把内容组件作为参数传入遮罩层组件，形成新组建返回。

1、遮罩层组件

import "./index.scss";
//ContentComponent：传入的内容组件，
//cancelEvent：取消按钮点击事件
//confirmEvent： 确认按钮点击事件
//data：外层传入遮罩层组件的参数
const LayerMask = ({ContentComponent, cancelEvent, confirmEvent, data})=>{
  return (
    <>
      <div className="pc-layer">
        <div className="layer-mask"></div>
        <div className="layer-content">
          <ContentComponent 
          cancelEvent={cancelEvent} 
          confirmEvent={confirmEvent}
          data={data}
          />
        </div>
      </div>
    </>
  )
}
export default LayerMask;

2、内容组件

const QrCode = ({cancelEvent,data}) => {
  return (
    <>
      <div className="pc-qrcode"></div>
    </>
  )
}
export default QrCode;

3、遮罩层组件和内容合并使用形成的高阶组件

<LayerMask 
          ContentComponent={QrCode} 
          cancelEvent={()=>{setShowQrCode(false)}}
          data={qrCode}
        /> : ""

最后效果：

该需求，每次变的只是内容，因此把内容当成另一个组件作为入参即可达到复用上层组件(遮罩层)的通用代码。