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}
/> : ""
最后效果:
该需求,每次变的只是内容,因此把内容当成另一个组件作为入参即可达到复用上层组件(遮罩层)的通用代码。